ログイン

問題5 カラフルな図形の作り方

CSSAnimationの問題

CSSAnimation

カラフルな図形の作り方

問題

今回はカラフルな図形を作っていきましょう!

自分の環境に書くコード

              <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¥
            
答えのアイコン

解説

まずwidthとheightを0にします。
そしてborderの色を四方向それぞれにいろを変え、太さは同じにしたら完成です。
こんな使い方はしたことはないのではないでしょうか。楽しんでいただけたなら幸いです。
ログインして解答を見る
完了にする!
LINEの友達追加でお役立ち動画をGET!!