CSSだけで旭日旗を作ってみた

@Akamaru12mg

最近CSSで面白いもの作ってないなぁ…

@Akamaru12mg

・・・

@Akamaru12mg

せや！旭日旗作ったろ！

作った

See the Pen 旭日旗 by Kuzlog (@Kuzlog) on CodePen.

日章部分は普通に◯を作っただけ。旭光部分はborderで作った台形を22.5度ずつ回転させて良い感じの位置に配置しています。最後は旗にoverflow:hidden;を指定して、はみ出た旭光を隠したら完成です。

ちなみにoverflow:hidden;を指定しないとこうなります。

花火かな？なんかカッコいいけど。

余程複雑な形じゃなければCSSだけで色々作れますよっていうネタでした。おしまい。