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

テスト用の表示や遊び心で図形を描きたい、ということがたまにあります。そんな時にお絵かきソフトを使わずに CSS で図形を書くことはないでしょうか?わざわざ Photoshop を開くのも面倒だと感じてしまう方! Sass でさっと図形を書いてしまいましょう。
 

 

一行で描いてしまう

いきなりですが、以下のソースを見てください。これは正方形を描く関数です。

今回の作る関数を利用すれば、上記のように一行で図形が描けます。これなら面倒なのもかなり軽減するのではないでしょうか。

実装方法

それでは実装部分を見てみましょう。

これが正方形を描くためのライブラリとなります。これだけでも十分な気がしますが、もう少し改良してみましょう。今までに作成した CSS3 をオーバーラップした transition 関数を使います。 hover 時に transition を用いてアニメーションしながら色が変わっていくようにしてみましょう。

デフォルトのままだと、赤から緑に色が変わります。少し味気ないので、拡張した呼び出し方をみてみましょう。

このように書くと、80 px の大きさの正方形が青からオレンジ色に変わっていきます。 @content を使うとこのように関数自体を拡張することができます。便利ですね。 @content の詳しい解説については「Sassの@contentの使い道とは? – @contentの実験と結果」にて行なっています。

 

また、今回は少し楽をするために今まで作成してきた CSS3 をオーバーラップしたライブラリを使用しています。これは、「 -webkit- 」などを自分で記述しなくていいように自動でやってくれるようにしたものです。 CSS3 をオーバーラップするライブラリの作成方法については「Sassで未対応ブラウザへのCSS3使用は警告&自動修正!」を参考にしてみてください。

作った図形一覧

正方形

四角(矩形)

楕円

三角形 – 左向き

三角形 – 下向き

三角形 – 右向き

三角形 – 上向き

三角形 – 左上向き

三角形 – 左下向き

三角形 – 右下向き

三角形 – 右上向き

台形

サンプル

実際に動作させてみたサンプルです。コードも見れるので是非いじって遊んでみてください。

最後に

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