Sass:CSSで描く図形36種をたった一行で書けるようにしてみた
はてなブックマーク - Sass:CSSで描く図形36種をたった一行で書けるようにしてみた
Pocket

Sass を使って一行で図形を書いてしまうというエントリーです。前回のエントリーである「Sass:CSSで描く図形13種をたった一行で書けるようにしてみた」に引き続き、少し複雑な図形21種類を追加しました。

 

 

参考元のサイト

css-tricks
 
この中の、 Sass 化できるものを作ってみました。

書けるようになった図形

どんな感じで実装しているのか、というのは前回のエントリーに任せて、今回は書けるようになった図形の一覧を見ていただこうと思います。また、基本図形とは違ってホバー時のアニメーションには対応していません。ざっと大きさを変えたい時は、「()」の中に 80px とか、数値を入れたら大きさが変わります。

新たに作成した図形の呼び出し方は以下になります。

平行四辺形

六芒星

星型

五角形

六角形

八角形

ハート型

無限

ダイヤ

ダイヤpart.2

カットダイヤモンド

パックマン

吹き出し

重要そうなマーク 12頂点

重要そうなマーク 8頂点

陰陽

バッジ

インベーダー

山括弧 (<,>)

ダウンロード

今回のエントリーも含めて、 github にて公開していますので是非使ってみてください。