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>
お礼
補足
創る楽しみの方だけに、ご参加いただきたいですね。 よろしくお願いいたします。