borderについて「へぇー」と思ったこと

HTML&CSS

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

CSSの勉強をしていてborderに関して

ゆんつ
ゆんつ

へぇー

と思ったことがありました。

今日はそのborderに関して「へぇー」と思ったことについて書きます

スポンサーリンク

線を組み合わせる時のborderの両端は尖っている!

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

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

ゆんつ
ゆんつ

普通だね

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

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

ゆんつ
ゆんつ

知ってた?

普段何気なくborderを使っていましたが、このような性質があるとは知りませんでした。

線をつけている要素のwidthとheightを0にすると以下のような感じになります。

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

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

ゆんつ
ゆんつ

面白いですね

この性質を利用して色んなものが作れる

ただ両端が三角形になるだけなら

ゆんつ
ゆんつ

へー

だけで終わりなのですが、このborderの両端が三角になる性質を利用して色んなものが作れるのです。

たとえば再生ボタン。

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

円形と先ほどのやり方を応用して作った三角形と組み合わせることで、動画サイトなどでよく見かける再生ボタンを手軽に作ることが出来ます(デザインだけなので押しても何も再生されません)。

また、同じような感じで吹き出しなんかも作れます(吹き出しの三角部分は解りやすいように色を変えています)。

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

これもborderの性質を利用して、角丸の四角形と組み合わせることで作ることが出来るのです。

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

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

それでは、またー。

HTML&CSS
ゆんつをフォローする
スポンサーリンク
スポンサーリンク
こんぷれ

コメント

タイトルとURLをコピーしました