borderの面白い特性と、その特性を利用したデザイン

こんにちは、ゆんつです。

CSSでよく利用するプロパティに「border」というものがあります。

borderは線の種類や幅、色を指定することができるプロパティです。

このborderには、面白い特性があります。

そして、その面白い特性を利用してデザインを作ることもできます。

今日は

について書きたいと思います。

borderの線と線が接する部分は三角形

borderが単線の時は普通に真っすぐの線です。

See the Pen
border1 by konpure (@yuntu)
on CodePen.

ゆんつ

普通だね

ところが四角形などborder同士が接するようになると、線と線が接する部分が三角形になるのです。

See the Pen
border2 by konpure (@yuntu)
on CodePen.

ゆんつ

知ってた？

borderを設定している要素のwidthとheightを0にすると以下のような感じになります。

See the Pen
borde3 by konpure (@yuntu)
on CodePen.

widthやheightを0にすると、線の両端部分だけが集まって三角形になり、その三角形があつまって四角形を構成するのです！

ゆんつ

面白いですね

borderの特性を利用したデザイン

ただ線が接する部分が三角形になるだけなら

ゆんつ

へー

だけで終わりなのですが、このborderの特性を利用して色んなデザインができるのです。

たとえば「再生ボタン」。

See the Pen
saisei by konpure (@yuntu)
on CodePen.

円形と、borderの特性を利用して作成した三角形と組み合わせることで、動画サイトなどでよく見かける再生ボタンを手軽に作ることが出来ます（デザインだけなので押しても何も再生されません）。

同様に、他の図形とborderによる三角形の組み合わせにより、吹き出しなんかも作れます(吹き出しの三角部分は解りやすいように色を変えています)。

See the Pen
hukidasi by konpure (@yuntu)
on CodePen.

まとめ

上記のように

という特性を覚えておくことで、三角形をつかったデザインを簡単に作成することが出来るようになります。

borderの特性を上手に利用して、良いデザインが作れるようになりたいですね。

それでは、またー。