カラフルな図形の作り方

問題

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

自分の環境に書くコード

              <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¥