Web制作ネタを中心に、ネット上の様々な情報をゆる~く発信する個人ブログです

KuzLog

2018/01/06 2018/01/13 Web制作

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

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


@Akamaru12mg
・・・


@Akamaru12mg
せや!旭日旗作ったろ!

作った

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

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

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

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

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