カラフルな図形の作り方
問題
今回はカラフルな図形を作っていきましょう!
自分の環境に書くコード
<div class="colorful"></div>
¥HTML¥
.colorful{
animation: rotate 3s linear infinite;
}
@keyframes rotate {
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}
¥CSS¥
期待する画面
解答ソースコード
.colorful{
width: 0;
height: 0;
border-top: 30px solid red;
border-bottom:30px solid blue;
border-left: 30px solid green;
border-right: 30px solid yellow;
}
¥CSS¥
完了にする!
解説
そしてborderの色を四方向それぞれにいろを変え、太さは同じにしたら完成です。
こんな使い方はしたことはないのではないでしょうか。楽しんでいただけたなら幸いです。