2018/08/20矢印や吹き出しの三角形部分を、CSSのafterやbeforeといった疑似要素で実装する機会が増えました。毎度、細かい調整につまづいたりするので、ここでまとめておきます。CSSで三角形を作る原理まず、CSSで三角形を作る原理ですが、太いborderを引くと分かりやすいですよね。green;これに対してborder-topをなしにして、border-leftとborder-rightを無色にしてしまえば、青色の部分だけ残るわけです。transparent;それぞれ上下左右を向いた三角形それぞれ上下左右を向いた三角形を実装するには、青色の三角形と同じ原理で作成可能です。green;もちろん、rotateプロパティで回転させるのもありですよね。三角形の角度を調整したいと思います。色のついたborderの太さで高さ、transparentで指定した2つのborderの太さの合計で底辺の長さが決まります。※必要に応じてwidth、heightも調整します。正三角形を作ってみます。はじめに作成した青い三角形をベースに1辺100pxの正三角形にする場合、border-rightとborder-leftの合計が100pxとなるように、それぞれ半分の50pxにします。高さは最初の4色の正方形からイメージすれば分かりやすいです。高さをborder-topとborder-bottomの合計「100×1.414≒141」にしたいわけですから、border-bottomはその半分の70.5pxにします。transparent;鋭い三角形を作るためには、高さを伸ばせばよいですね。transparent;borderを調整することでさまざまな三角形を表現することが可能です。transparent;CSSで三角形を表現する方法はいろいろありますが、この方法がシンプルで理解しやすく、実装しやすいなと思いました。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。inc.Profileサイト「helog」は私がWeb制作に携わるなかでの経験を中心に記しています。前にも発生したんだよなぁ。」といった無駄な時間を省くことを目的に書き始めました。「へ」の「ログ」です。個人的な技術メモのようなものですが、みなさんの何か役に立つことがあればこの上ないです。