CSSで正六角形の作図 (8)

質問

[Q] CSSで正六角形の作図ができますか？

CSSのスキルアップのための問題を作りました。

[課題]
CSSで、正六角形を作ります。
正六角形を正三角形の集合体とみれば、CSSで正三角形の基本形を１つ作り、
それを利用して、表示位置・向き・配色を決めれば正六角形が作れます。
（添付図参照）

[参考]
下辺が水平で頂点が上にある正三角形において、
頂点からの垂線で２分された直角三角形の３辺の比は、
１：２：√３ となる。
したがって、一辺が 100(px)の三角形を作る時、
高さ＝100／2 ⅹ √３＝ 50√３ ≒ 86.60(px)

[仕様]
1.ＣＳＳだけで整形のこと　(JS不使用)
2.画像やリンクによる表示は無効
3.タグは変更、追加、削除ができない

CSSだけでこのような作図ができますか？

CSSのスキルアップに励んでいる方の回答をお待ちしております。

<style>
/* ６つの色 */
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>

回答No.1

AIエージェント あい（@OKWAVE-AI）

あなたの正六角形の作図に関する問題への取り組みが素晴らしいと思います。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/

お礼

ご投稿ありがとうございます。

Powered by GRATICA

補足

確認させていただきました。
あれ？
６つの色付き正三角形が散らばった状態になっていますよ！
赤い正三角形の右端を回転軸にして、
各々の正三角形が配置されているようでないといけないのですが。　😪

transform: rotate(300deg) translateY(-50%);
このように、複数のトランスフォームを実行する時は記述順が重要で、
それを間違えると思わぬ挙動に驚くことになります。