CSSで作図とアニメーション (6)

質問

[Q] CSSで作図とアニメーションができますか？

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

[課題]
CSSで、下辺が水平で頂点が上にある正三角形を作ります。
一辺が100pxで緑色の正三角形、頂点に「Ａ」と表示させておきます。
その外接円を灰色で、その中心を赤色で描きます。
（添付図参照）

[動作]
1.円にホバーした時、
　・正三角形が青色に変わる
　・３秒後、右回りにアニメーションで一回転する
2.マウスアウトすると、アニメーションで元の状態に戻る

[仕様]
1.ＣＳＳだけで整形のこと　(JS不使用)
2.画像やリンクによる表示は無効
3.タグは変更、追加、削除ができない
4.チェックボックスを使わずに実現させる

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

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

[CSS]
<style>
/* 添付図のように整形するスタイル設定 */
</style>

[HTML]
<div class="sankaku"></div>

この投稿のマルチメディアは削除されているためご覧いただけません。

回答No.1

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

CSSだけであなたの課題を実現することができます。以下にそれを達成するためのスタイルをまとめました。ただし、頂点に「A」を表示するためにはHTMLに微調整が必要ですが、タグの追加や変更ができないとのことであれば、代わりに`:before`または`:after`疑似要素を使用して「A」を表示させます。

以下のCSSスタイルをあなたが挙げたHTMLコードに追加してください。

```css
<style>
.sankaku {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 86.6px solid green; /* 高さ: サイド * sqrt(3) / 2 */
position: relative;
}

.sankaku:before {
content: 'A';
position: absolute;
top: -70%; /* 調整する位置 */
left: 40%; /* 調整する位置 */
color: black; /* 文字の色 */
}

.sankaku:hover {
animation-name: rotate-triangle;
animation-duration: 3s;
animation-fill-mode: forwards; /* アニメーションを維持 */
animation-delay: 3s; /* 3秒後にアニメーション開始 */
animation-timing-function: linear;
border-bottom-color: blue;
}

@keyframes rotate-triangle {
from {transform: rotate(0deg) translate(-50%, -50%);}
to {transform: rotate(360deg) translate(-50%, -50%);}
}

.sankaku::after {
content: '';
z-index: -1; /* 下層に配置 */
position: absolute;
top: 50%;
left: 50%;
width: 173.2px; /* 外接円の直径 */
height: 173.2px; /* 外接円の直径 */
background: rgba(128, 128, 128, 0.5); /* 灰色の外接円 */
border-radius: 50%;
margin-left: -86.6px; /* 外接円の半径 */
margin-top: -86.6px; /* 外接円の半径 */
}

.sankaku::before {
content: '';
z-index: 2; /* 最前層に配置 */
position: absolute;
top: 50%;
left: 50%;
width: 10px; /* 中心の大きさ */
height: 10px; /* 中心の大きさ */
background: red; /* 赤色の中心 */
border-radius: 50%;
margin-left: -5px; /* 中心の半径 */
margin-top: -5px; /* 中心の半径 */
}
</style>
```

このコードスニペットでは正三角形と外接円、中心点を一つの`.sankaku`要素で描画しています。正三角形へのホバーによる青色への変化と回転アニメーション、非ホバー時に元に戻る動作もCSSの`hover`疑似クラスと`@keyframes`ルールを使用して制御しています。

さらに、CSSの疑似要素を使用して、正三角形の頂点に「A」を表示しており、外接円は`:after`疑似要素で描画し、その中心は`:before`疑似要素で再表現しています。これにより、あなたが求めている動きを実現することができます。

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

お礼

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

Powered by GRATICA

補足

確認させて頂きました。

[問題点]
・円の半径が足りないため、外接円になっていない
・頂点「A]を基準に回らない
・文字「Ａ」が表示されていない
・疑似要素「.sankaku:before」を２つも書くのは無駄！

・ひと工夫すれば、キーフレームは次の記述で済みます。
@keyframes rotate-triangle {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

内接する正三角形の一辺の長さは、円の半径の長さに等しい。
よって、どちらも 100px です。
結局、外接円の直径は「173.2px」ではなく「200px」が正しいです。

チョット残念でした。　😪