CSSで正六角形の作図その３ (10)

質問

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

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

[課題]
CSSで、正六角形を作ります。
前回の「作図 (9)」では３つのDIV要素それぞれに
CSSで２個ずつ正三角形を作成して正六角形を完成させました。
今回は、「rokkaku要素」の子要素２つで正六角形を実現させよう、というものです。
（添付図参照）

[仕様]
1.ＣＳＳだけで整形・動作のこと　(JS不使用)
2.画像やリンクによる表示は無効
3.タグは変更、追加、削除ができない
4.チェックボックスを１つ用意する
5.「回転させる」にチェックインすると回転アニメーションする
6.チェックを外すと回転アニメーションが止まって原状復帰する

[参考]
・DIV要素が１つあれば、疑似要素で２つとそれ自体で、
　合計３つの正三角形が作れます。
・正三角形の頂点から垂線を引いてできた直角三角形の３辺の比は
　１：２：√3 になります。
・Canvasが使えなくても、borderまたは polygonで正三角形が作れます。

CSSだけでこのような作図とアニメーションができますか？

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

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

回答No.1

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

あなたの相談内容に応じて、CSSで正六角形を作成し回転アニメーションを実装する方法を示します。

まず、HTML構造をそのまま利用して、以下のCSSを追記してください。

```css
.rokkaku {
position: relative;
width: 120px;
height: 104.8px; /* 正六角形の高さ (辺の長さの√3倍) */
}

.rokkaku > div {
position: absolute;
width: 0;
height: 0;
border-left: 60px solid transparent; /* 辺の半分の幅 */
border-right: 60px solid transparent; /* 辺の半分の幅 */
}

/* 下向きの正三角形 */
.rokkaku > div:first-child {
border-bottom: 103.9px solid blue; /* 高さ (√3倍) */
top: 0;
}

/* 上向きの正三角形 */
.rokkaku > div:last-child {
border-top: 103.9px solid blue; /* 高さ (√3倍) */
bottom: 0;
}

/* 回転アニメーション */
@keyframes rokkaku-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

/* チェックボックスによる制御 */
input[type='checkbox']:checked ~ .container .rokkaku {
animation: rokkaku-rotate 2s linear infinite;
}
```

そして、HTMLに以下のチェックボックスを追記してください。

```html
<input type="checkbox" id="rotate-toggle"><label for="rotate-toggle">回転させる</label>
```

CSSは、`.rokkaku` 要素を正六角形の枠とし、その子要素で2つの正三角形を作成しています。一つ目の子要素は下向きの正三角形、二つ目の子要素は上向きの正三角形を形成します。これにより、重なり合うことで正六角形が形成されます。

回転アニメーションを制御するために、@keyframes を使用して無限の回転アニメーションを定義し、チェックボックスによってそのアニメーションを適用するかどうかを制御しています。チェックが入っている間は `animation` プロパティによって回転が続き、チェックを外すと停止します。

このコードがあなたの問題の解決に役立つことを期待しています。CSSを利用した正六角形の作図とアニメーションは、上述のコードのように実現できます。

------
こちらの回答はAIエージェント「あい」による自動投稿です。
OKWAVEのAIに対する取り組みについてはこちらをご確認ください。
https://staffblog.okwave.jp/2023/06/07/10415/

お礼

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

Powered by GRATICA

補足

確認させていただきました。

・「下向きの正三角形」と「上向きの正三角形」の解釈が逆
・「rokkaku要素」は「overflow:hidden」が必要
　以上から、正六角形になっていない。

・「rokkaku要素」を中央配置するには 上下に7.6pxのmarginが必要

この課題をこなす参考に、次のヒントを挙げておきました。

「DIV要素が１つあれば、疑似要素で２つとそれ自体で、
　合計３つの正三角形が作れます。」

　その疑似要素がまったく用いられていないということは、
まさか、作成中のものを回答してしまった（？)
だから、６色の正六角形になっていない（？)

そういういうことなのでしょうか。
これでは、参加賞はもらえても ＢＡはとても無理ですね 　😪