とあるエンブレムをCSSのみで描くみたいなことをやってみた的なお話

とあるエンブレムが話題になっているけど、これをCSSで配置しよう的なものを作ってみた。
綺麗に一つで書けたらいいなとは思ったけど出来なかったので、
9つのグリッドで考えるという方法でやってみた。

ということでソースなどは下記から。

<div class="grid-wrapper clearfix">
  <div class="grid"><div class="s2"></div></div>
  <div class="grid"><div class="s1"></div></div>
  <div class="grid"><div class="c"></div></div>
  <div class="grid"><div class=""></div></div>
  <div class="grid"><div class="s1"></div></div>
  <div class="grid"><div class=""></div></div>
  <div class="grid"><div class=""></div></div>
  <div class="grid"><div class="s1"></div></div>
  <div class="grid"><div class="s3 r2"></div></div>
</div>

<style>
.grid-wrapper{
  width:300px;
  height:300px;
  overflow:hidden;
  background-color:#fff;
}

.grid{
  width:calc(100% / 3);
  height:calc(100% / 3);
  overflow:hidden;
  float:left;
}

.grid > div{
  width:100%;
  height:100%;
  position:relative;
}

.c{
  background-color:#ff0000;
  border-radius:50%;
}

.s1{
  background-color:#000000;
}

.s2{
  background-color:#ffd700;
}

.s3{
  background-color:#808080;
}

.s2:after,.s3:after{
  background-color:#ffffff;
  content:"";
  position:absolute;
  width:630px;
  width:calc(100% * 3 * 1.05);
  height:calc(100% * 3 * 1.05);
  top:calc((100% * 3 - 100% * 3 * 1.05) / 2);
  left:calc((100% * 3 - 100% * 3 * 1.05) / 2);
  border-radius:50%;
}

.r1{
  transform:rotate(90deg);
}

.r2{
  transform:rotate(180deg);
}

.r3{
  transform:rotate(270deg);
}

.grid-wrapper-black{
  background-color:#000000;
}

.grid-wrapper-black .s1{
  background-color:#ffffff;
}

.grid-wrapper-black .s2:after{
  background-color:#000000;
}

.grid-wrapper-black .s3:after{
  background-color:#000000;
}
</style>

こんな感じのものを配置してあげればOK。
赤いところをかえればサイズも変わるけど、正方形にしてください的な。
ということで各classの簡単な使い方。

.grid-wrapper .grid-wrapper-black .grid
.grid-wrapperの中には9つのgridが必要。
ちなみに背景色を白から黒に反転させたい場合は、class="grid-wrapper grid-wrapper-black"とやってあげればOK。

.c
これは赤い円を描きたい場合に必要。
親クラスがgrid-wrapper-blackであれば背景色は黒になる。

.s1
これは黒い四角い背景を描きたい場合に必要。
親クラスがgrid-wrapper-blackであれば背景色は白になる。

.s2
これは左上にある弧になっているみたいなのを描きたい場合に必要。
親クラスがgrid-wrapper-blackであれば背景色は黒になる。

.s3
これは右下にある弧になっているみたいなのを描きたい場合に必要。
親クラスがgrid-wrapper-blackであれば背景色は黒になる。

.r1 .r2 .r3
これは右下にある弧になっているみたいなのに使っている。
回転させるためのクラスとなっている。
r1は90度、r2は180度、r3は270度回転する。

という感じで各パーツをグリッド上に配置する事が出来る。
これをうまく使えばアルファベットのやつも出来るはず。
出来たら1つのクラスで各パーツを描けないかと思ったけどちょっと無理っぽいし、
jqueryのプラグインでやればと思ったけど面倒だったから作らなかったけど的な。

ということで活用したい人がいたら活用してください的な。