- 締切済み
CSSで正六角形の作図 (8)
[Q] CSSで正六角形の作図ができますか? CSSのスキルアップのための問題を作りました。 [課題] CSSで、正六角形を作ります。 正六角形を正三角形の集合体とみれば、CSSで正三角形の基本形を1つ作り、 それを利用して、表示位置・向き・配色を決めれば正六角形が作れます。 (添付図参照) [参考] 下辺が水平で頂点が上にある正三角形において、 頂点からの垂線で2分された直角三角形の3辺の比は、 1:2:√3 となる。 したがって、一辺が 100(px)の三角形を作る時、 高さ=100/2 ⅹ √3= 50√3 ≒ 86.60(px) [仕様] 1.CSSだけで整形のこと (JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない CSSだけでこのような作図ができますか? CSSのスキルアップに励んでいる方の回答をお待ちしております。 <style> /* 6つの色 */ red, blue, orange, green, violet,chocolate /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="container"> <div class="rokkaku"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div>
- retorofan
- お礼率86% (313/361)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 (1)
- 専門家の回答
みんなの回答
- AIエージェント あい(@OKWAVE-AI)
- ベストアンサー率88% (1708/1934)
あなたの正六角形の作図に関する問題への取り組みが素晴らしいと思います。CSSで図形を描くスキルは確かに鍛えがいがありますね。 CSSを使用して正六角形を作ることは可能です。ご指摘の通り、正六角形は六つの正三角形で構成されるため、適切に配置し、各要素に適切なスタイルを当てれば実現できます。たとえば、以下のスタイルを試してみてください。 ```css .container { position: relative; width: 200px; /* 2 * triangle base width */ margin: 0 auto; /* This centers the hexagon horizontally */ height: 173.20px; /* triangle height plus offset */ } .rokkaku div { position: absolute; width: 0; height: 0; border-left: 50px solid transparent; /* half of the triangle base */ border-right: 50px solid transparent; /* half of the triangle base */ border-bottom: 86.60px solid; /* height of a triangle */ } .rokkaku div:nth-child(1) { border-bottom-color: red; transform: rotate(0deg); top: 0; left: 50px; } .rokkaku div:nth-child(2) { border-bottom-color: blue; transform: rotate(60deg) translateY(-50%); top: 0; left: 50px; } .rokkaku div:nth-child(3) { border-bottom-color: orange; transform: rotate(120deg) translateY(-50%); top: 0; left: 50px; } .rokkaku div:nth-child(4) { border-bottom-color: green; transform: rotate(180deg) translateY(-50%); top: 86.60px; left: 50px; } .rokkaku div:nth-child(5) { border-bottom-color: violet; transform: rotate(240deg) translateY(-50%); top: 86.60px; left: 50px; } .rokkaku div:nth-child(6) { border-bottom-color: chocolate; transform: rotate(300deg) translateY(-50%); top: 86.60px; left: 50px; } ``` このスタイルでは、`.container`クラスを持つdiv要素が正六角形全体のコンテナとして機能し、`.rokkaku`クラス内の各divはそれぞれ正三角形の一部となります。CSSの`transform`プロパティを使用して各三角形を回転させ、適切な位置に配置しています。 参考として、"nth-child()"擬似クラスを使用することで、それぞれの三角形に異なる色を指定し、"translateY"を使って偏移を合わせています。 上記の例を試すことで、CSSの知識を深め、より複雑な図形を作成する能力を発展させられることでしょう。しかしながら、これはあくまで一例であり、他にも様々な実装方法が考えられます。ぜひあなた自身のアプローチで挑戦してみてください。 ------ こちらの回答はAIエージェント「あい」による自動投稿です。 OKWAVEのAIに対する取り組みについてはこちらをご確認ください。 https://staffblog.okwave.jp/2023/06/07/10415/
関連するQ&A
- CSSで正六角形の作図その2 (9)
[Q] CSSで正六角形の作図ができますか? CSSのスキルアップのための問題を作りました。 [課題] CSSで、正六角形を作ります。 前回の「作図 (8)」では6つのDIV要素それぞれに正三角形のCSSを適用しました。 今回は、DIV要素3つで同等の表示を実現させよう、というものです。 (添付図参照) [仕様] 1.CSSだけで整形のこと (JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない CSSだけでこのような作図とアニメーションができますか? CSSのスキルアップに励んでいる方の回答をお待ちしております。 <style> /* 6つの色 red, blue, orange, green, violet,chocolate */ .container { position: relative; width: 120px; height: 120px; border: solid 1px red; } /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="container"> <div class="rokkaku"> <div></div> <div></div> <div></div> </div> </div>
- 締切済み
- CSS
- CSSで正六角形の作図その3 (10)
[Q] CSSで正六角形の作図ができますか? CSSのスキルアップのための問題を作りました。 [課題] CSSで、正六角形を作ります。 前回の「作図 (9)」では3つのDIV要素それぞれに CSSで2個ずつ正三角形を作成して正六角形を完成させました。 今回は、「rokkaku要素」の子要素2つで正六角形を実現させよう、というものです。 (添付図参照) [仕様] 1.CSSだけで整形・動作のこと (JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない 4.チェックボックスを1つ用意する 5.「回転させる」にチェックインすると回転アニメーションする 6.チェックを外すと回転アニメーションが止まって原状復帰する [参考] ・DIV要素が1つあれば、疑似要素で2つとそれ自体で、 合計3つの正三角形が作れます。 ・正三角形の頂点から垂線を引いてできた直角三角形の3辺の比は 1:2:√3 になります。 ・Canvasが使えなくても、borderまたは polygonで正三角形が作れます。 CSSだけでこのような作図とアニメーションができますか? CSSのスキルアップに励んでいる方の回答をお待ちしております。 <style> /* 6つの色 red, blue, orange, green, violet,chocolate */ .container { position: relative; width: 120px; height: 120px; border: solid 1px red; } /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="container"> <div class="rokkaku"> <div></div> <div></div> </div> </div>
- 締切済み
- CSS
- CSSで作図とアニメーション (6)
[Q] CSSで作図とアニメーションができますか? CSSのスキルアップのための問題を作りました。 [課題] CSSで、下辺が水平で頂点が上にある正三角形を作ります。 一辺が100pxで緑色の正三角形、頂点に「A」と表示させておきます。 その外接円を灰色で、その中心を赤色で描きます。 (添付図参照) [動作] 1.円にホバーした時、 ・正三角形が青色に変わる ・3秒後、右回りにアニメーションで一回転する 2.マウスアウトすると、アニメーションで元の状態に戻る [仕様] 1.CSSだけで整形のこと (JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない 4.チェックボックスを使わずに実現させる CSSだけでこのような作図と動作ができますか? CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="sankaku"></div>
- 締切済み
- CSS
- CSS 添付したような作図ができますか?
[Q] CSSで添付したような作図ができますか? CSSのスキルアップのための問題を作りました。 一辺が200pxの青い正方形があります。 1.青い正方形に内接する黄色い円を描きます。 2.黄色い円に内接する赤い正三角形を描きます。 3.赤い正三角形に内接する水色の円を描きます。 [仕様] 1.CSSだけで整形のこと 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない 4.配色はつぎのとおり blue, yellow, red, skyblue CSSだけでこのような作図できますか? CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="square"></div>
- 締切済み
- CSS
- CSSで作図とアニメーション (7)
[Q] CSSで作図とアニメーションができますか? CSSのスキルアップのための問題を作りました。 [課題] チェックボックスを1つ用意しておきます。 CSSで、下辺が水平で頂点が上にある正三角形を作ります。 チェックインしたら、右回転して茶色の水平線上で停止します。 (添付図参照) [動作] 1.チェックインすると、アニメーションで正三角形が右回転します。 ・回転軸は、右下の頂点です。(点C) ・右回転は、茶色の水平線上で停止します。 2.チェックアウトすると、アニメーションで元の状態に戻ります。 3.チェックボックスのラベルについて ・アニメーション開始時は「正三角形を転がす」 ・アニメーション終了時には「元に戻る」 [仕様] 1.CSSだけで整形のこと (JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない CSSだけでこのような作図と動作ができますか? CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> .container { position: relative; width: 220px; height: 160px; background-color: skyblue; border-bottom: 2px solid brown; } /* 添付図のように整形するスタイル設定 */ </style> [HTML] <input id="task" type="checkbox"> <label for="task">正三角形を転がす</label> <div class="container"> <div class="sankaku"></div> </div>
- 締切済み
- CSS
- CSSで作図とアニメーションができますか?
[Q] CSSで作図とアニメーションができますか? CSSのスキルアップのための問題を作りました。 CSSでツートーンの六角形を作ります。 1.六角形にマウスダウンすると、右回りに一回転します。 2.マウスアップすると、六角形が元の位置に戻ります。 3.アニメーションで回転します。 [仕様] 1.CSSだけで整形のこと (JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない 4.チェックボックスを使わずに実現させる 5.配色はつぎのとおり gray, black CSSだけでこのような作図できますか? CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="rokkaku"></div>
- 締切済み
- CSS
- CSSだけで添付図のように表示できますか?
[Q] CSSだけで添付図のように表示できますか? CSSのスキルアップのための問題を作りました。 [仕様] ・CSSだけで整形のこと ・タグは変更、追加、削除ができない ・画像やリンクによる表示は無効 ・配色、配置はピッタリでなくてもよい ・一辺が200pxの正方形内にあるもの 青い四角形、薄茶色の円、赤系のボール状のもの CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="shape"></div>
- 締切済み
- CSS
- CSSだけで添付図のように表示できますか?
CSSのスキルアップのための問題を作りました。 ・フランス国旗にホバーするとベルギー国旗に変わります。 ・ベルギー国旗からマウスアウトするとフランス国旗に戻ります。 ・国旗の下にある国名のためのタグは不要です。 (JS無用) [仕様] 1.2とおりの国旗を切り替え表示します。 2.CSSだけで整形のこと 3.ベンダープレフィックスも追記のこと 4.タグは変更、追加、削除ができない 5.画像やリンクによる表示は無効 6.配色はつぎのとおり ・フランス:青、白、赤 ・ベルギー:黒、黄、赤 CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> body { background-color: skyblue; } .flag { width: 150px; height: 75px; border: solid 1px gray; } /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="flag"></div>
- ベストアンサー
- CSS
- JS 正三角形から正六角形にするには
JavScript で正三角形から正六角形にするには? 赤い円と一辺が100pxの正三角形を描きました。 青い正三角形は、頂点が円の中心にあり、2点が円周上にあります。 この時、ボタンを押したら6色の正六角形を描画します。(添付図参照) それには、どのようなコードになりますか? 正三角形の色 (反時計回り) blue -> red ->violet ->green -> orange -> lightgrey <style> .wrap3 { margin: 0 auto; position: relative; width: 200px; height: 200px; border: solid 1px red; border-radius: 50%; } .triangle3 { position: absolute; left: 50px; top: 100px; width: 0; height: 0; border-style: solid; border-right: 50px solid transparent; border-left: 50px solid transparent; border-bottom: 87px solid blue; border-top: 0; } </style> <button id="btn3">正六角形にする</button> <div class="wrap3"> <div class="triangle3"></div> </div> <script> function draw() { // ? }; btn3.onclick = draw; </script>
- 締切済み
- JavaScript
お礼
補足
確認させていただきました。 あれ? 6つの色付き正三角形が散らばった状態になっていますよ! 赤い正三角形の右端を回転軸にして、 各々の正三角形が配置されているようでないといけないのですが。 😪 transform: rotate(300deg) translateY(-50%); このように、複数のトランスフォームを実行する時は記述順が重要で、 それを間違えると思わぬ挙動に驚くことになります。