ページの先頭へ
トップに戻る
2017年9月20日 Web制作

【2017年版】CSSのみで三角形を作る方法を解説するよ|ついでに台形や扇形も作ってみるよ

タイトル通り、CSSのみで三角形を作る方法を紹介します。

「三角形なんて作ってどーすんの?」って思う人もいるかもしれませんが、吹き出しやコーナーリボンなどの装飾を作る際には欠かせないテクニックです。

borderを使った三角形

CSSで三角形を作るとき、最もよく使われる手法です。
とりあえずサンプルを作ってみましょう。
はい、三角形が出来ました。

横幅と高さが0のブロック要素に透過(transparent)したborderを指定し、後からborder-bottomに色を与えると上向き三角形の出来上がりです。

どういう仕組みになっているのか、それぞれのborderの挙動を画像で解説します。 試しに全てのborderに別々の色を指定してみると…
こうすると分かりやすいですね。
borderを使った三角形は、次に紹介するlinear-gradientを使う方法よりも理解しやすいです。

linear-gradientを使った三角形

borderを使わない方法もあります。
はい、三角形です。

この方法は少し分かりにくいですが、横幅と高さをwidthheightで直感的に指定できるというメリットがあります。

これは2種類のグラデーションを組み合わせて三角形を作るという手法なんですが、説明がややこしいので色分けして作ったCodepenのリンクを貼っておきます。適当に数字をいじって動作を確認すれば理解できるかと。

See the Pen oGxPyN by Kuzlog (@Kuzlog) on CodePen.

台形の作り方

widthの値をいじれば台形が作れます。
使い道はなさそう。

扇型の作り方

border-radiusを使えば扇型が作れます。
これも使い道は…なさそう。

縦長(横長)三角形の作り方

borderの横幅を調整すれば、縦長や横長の三角形が作れます。
こんな感じで、応用すれば色々な形がCSSのみで実現可能です。

”>”の作り方

これは三角形ではない?ですが、borderの挙動の理解を深める事ができるので、一応紹介しときます。
後はtransform:rotate(45deg);で傾ければ「>」が完成するんですが、この各borderの結合部分の挙動を見て「ん?」ってなる人もいるんじゃないでしょうか。

言葉だと説明しづらいので画像で解説。 こんな感じで指定しなかったborderとの結合部分は斜線になりません。(よく考えたら当たり前か…)
以上、CSSのみで三角形を作る方法でした。

使いこなせれば、サイト上の様々なパーツを画像からPureCSSに置き換えることが出来る(かもしれない)ので、ファイル容量の削減やメンテナンス性の向上に繋がります。

おわり。