アイドルマスターCSS一発芸

どうも アドベントカレンダー芸人です。今23時58分です。オフ会してたらこんな時間です。

さて、今回はみなさんにアイドルマスターCSS一発芸を披露したいと思います。ではどうぞ。

CSSのlinear-gradientのみでトラプリのロゴを構成しています。

$color1: rgb(80, 170, 165);
$color2: rgb(102, 107, 162);
$color3: rgb(103, 188, 223);
/* 全体の背景色 */
body,
body.app-body,
.ui {
  background:
  linear-gradient(63.43deg, transparent 66.6%, white 66.6%) 0 0,
  linear-gradient(-63.43deg, transparent 66.6%, white 66.6%) 0 0,
  
  linear-gradient(63.43deg, transparent 64.6%, $color1 64.6%) 0 0,
  linear-gradient(-63.43deg, transparent 64.6%, $color2 64.6%) 0 0,
  
  linear-gradient(to bottom, transparent 98%, $color3 98%) 0 0,
  linear-gradient(to bottom, transparent 98%, white 98%) 0 -2px,
  
  linear-gradient(63.43deg, transparent 62.6%, white 62.6%) 0 0,
  linear-gradient(-63.43deg, transparent 62.6%, white 62.6%) 0 0,
  
  linear-gradient(63.43deg, transparent 60.6%, $color1 60.6%) 0 0,
  linear-gradient(-63.43deg, transparent 60.6%, $color2 60.6%) 0 0,
  
  linear-gradient(to bottom, transparent 98%, $color3 98%)0 -4px,
  linear-gradient(to bottom, transparent 98%, white 98%)0 -6px,
  
  linear-gradient(63.43deg, transparent 58.6%, white 58.6%) 0 0,
  linear-gradient(-63.43deg, transparent 58.6%, white 58.6%) 0 0,
  
  linear-gradient(63.43deg, transparent 56.6%, $color1 56.6%) 0 0,
  linear-gradient(-63.43deg, transparent 56.6%, $color2 56.6%) 0 0,
  
  linear-gradient(to bottom, transparent 98%, $color3 98%) 0 -8px
  
  ;
  // background-color: #36c;
  background-size: 30px 30px;
}