CSSで三角形を作る際、以前はborderを使った方法がほとんどでしたが、近年はclip-pathを使うことも多くなってきたのではないでしょうか。clip-pathは三角形以外にもいろいろな図形を簡単に作成できてとても便利です。この記事ではclip-pathで三角形を作成する方法を解説していきます。
clip-pathとは
clip-pathとは、要素のクリッピング領域を作成するプロパティです。クリッピング領域を作成すると、領域内は表示されて領域外は表示されなくなります。clip-pathを使用することで図形を描画したり、画像を任意の形にくり抜いたりすることが可能になるわけです。
clip-pathで使用できる基本シェイプ(basic-shape)では、下記の図形を定義することができます。
- 四角形：inset()
- 円形：circle()
- 楕円形：ellipse()
- 多角形：poligon()
それぞれの詳しい解説は本記事では割愛しますが、例として簡単なサンプルを示すと、それぞれこのような図形がCSSで作れます。
今回は三角形を作りたいのでpoligonを使います。
clip-pathで三角形を作るための基本
clip-pathで多角形を作るにはpolygon()を使用するわけですが、()の中にはXY座標を入力します。横がX軸、縦がY軸です。
三角形には頂点が3点必要なので、下図のようにA・B・Cの位置を座標で指定することになります。左上が(0,0)になります。線で描かれた四角形の部分がdivや画像などの要素で、頂点Aは上辺の中央(50%,0)、頂点Bは下辺の右端(100%,100%)、頂点Cは下辺の左端(0,100%)の位置になります。
例えば、100px×100pxの正方形の要素があるとして、そこに上記と同じ座標設定で三角形をclip-pathで作成すると下記のようなコードになります。
<div class="sample_triangle_01"></div>.sample_triangle_01{
display: block;
width: 100px;/*要素の幅*/
height: 100px;/*要素の高さ*/
clip-path: polygon(50% 0, 100% 100%, 0 100%);/*三角形の座標*/
background-color: #add4f6;/*背景色*/
}これで実際に作成されるのがこちらです。
座標を変えると三角形の向きや形を様々に変えることができます。
.sample_triangle_02{
clip-path: polygon(0 0, 100% 100%, 0 100%);
}.sample_triangle_03{
clip-path: polygon(30% 0, 100% 0, 0 80%);
}ちなみに座標はカンマで区切ればいくつでも増やせるので、四角形や五角形は勿論、矢印や星型なども作成できます。この記事では三角形以外は取り上げませんが、左上を基準にして(X Y, X Y,…)と時計回りに座標を指定していけばOKです。
clip-pathとaspect-ratioを使って比率が正確な三角形を作る
aspect-ratioとは
aspect-ratioはアスペクト比(縦横の比率)を設定できます。例えば要素を正方形にしたいと思った時、widthとheightに100pxなどと絶対値で指定する場合は簡単にできますが、レスポンシブデザインでは相対値(%など)で指定する場合も多く、高さの指定が難しいことがあります。そんな時に使えるのがaspect-ratioです。
下の正方形は親要素に対して幅20%を指定し、aspect-ratioで1:1の正方形を作っています。PCでウィンドウサイズを変えてみるとわかりやすいですが、親要素の幅に応じて正方形の幅も可変しますが正方形であることは崩れません。
<div class="sample_aspect_ratio">
<div></div>
</div>.sample_aspect_ratio{
width: 100%;
}
.sample_aspect_ratio div{
width: 20%;
aspect-ratio: 1;
background-color: #bee8be;
}このように、%で幅を指定してレスポンシブに対応したい時、従来の方法では高さの計算が難しいですが、aspect-ratioを使えばその比率に応じた高さが自動で設定されるようになります。
aspect-ratioの指定は横/縦の順で記述します。
/*アスペクト比16:9の場合*/
aspect-ratio: 16 / 9; 割合数値で書いてもOKです。アスペクト比が2 / 1の場合、割り算した結果である2と書いても同じになります。
/*この二つは同じ*/
aspect-ratio: 2 / 1;
aspect-ratio: 2;まとめると、aspect-ratioは縦横比のことで、横÷縦の割合数値で指定することも可能です。aspect-ratioを使うと比率を指定して三角形を作成することができます。
正三角形を作る
clip-pathとaspect-ratioで正三角形を作成できます。正三角形とは3辺の長さが等しい三角形です。
.equilateral_triangle{
width: 200px;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
aspect-ratio: 1 / cos(30deg);
background-color: #add4f6;
}上記ではwidthを絶対値で指定していますが、相対値で指定しても正三角形ができます。
cos(30deg)！？ウッ…なんだか頭が痛くなってきたにゃ…
くっ…なないろも眩暈が…
なないろは数学がサッパリなのでcosとか見ると白目剥いちゃうのですが、なないろなりにaspect-ratio: 1 / cos(30deg);の部分を解説していきます。理解されてる方やコードコピペでOKな方はスルーして下さい。数学サッパリなので解説間違ってたらごめんなさい！責任は取れません。
三角関数、覚えてますか。sin(サイン)、cos(コサイン)、tan(タンジェント)。CSSでも三角関数が使えます。三角関数の前段階である三角比のお勉強で、「直角三角形の直角以外のもう一つの角度がわかると、三角形の辺の長さの比が決まる」と習いますね。この、角度によって決まる辺の比率を表すのに三角関数が使われます。
下記の直角三角形でsin、cos、tanの値の求め方を記憶の遥か奥底から引っ張り出してみましょう。基準となる角をΘ(シータ)とします。
直角と向かい側にある斜めの辺が斜辺、基準となる角Θと隣り合っている辺を隣辺、角Θの向かい側の辺が対辺になります。これを踏まえて、直角三角形の三角関数の定義は下記になります。
今回作りたいのは正三角形です。aspect-ratioで縦横比を指定して正三角形を作るということは、横1に対して縦をいくつに設定すればいいのかを考えることになります。
正三角形の頂点から底辺に向かって垂直な線を引くと、左右対称な直角三角形が2つできます。左右どちらの直角三角形で考えても良いのですが、下図では左側の直角三角形で考えていきます。頂点Bから底辺ACに垂直な線を引いた交点をDとします。辺BDが正三角形の高さになります。三角形の内角の和は180°で、正三角形の1つの内角は60°なので、∠BAD=60°、∠ABD=30°になります。図に描かれている斜辺・隣辺・対辺は、基準となる角を∠ABD=30°にした時の関係になります。
正三角形ABCの底辺と高さに当たるのは辺ACと辺BDです。辺ACは辺ABと同じ長さなので、辺ABと辺BDの比率が正三角形の底辺(横)と高さ(縦)の比率になります。つまり、正三角形の底辺と高さの比率は、直角三角形の斜辺と隣辺の比率であるcos30°と同じなのです。高さを底辺で割った値(高さ÷底辺)が cos30°になるため、底辺を1とすると高さが底辺に対して cos30°の割合になり、正三角形の形になります。よって、aspect-ratio: 1 / cos(30deg);を指定すると正三角形が作成できるのです。
cos30°の値も確認していきましょう。正三角形の底辺と高さの比率を具体的に数値で表すことができます。
三平方の定理により、30°、60°、90°の直角三角形の辺の比は1:2:√3になります。したがって、cos30°=√3/2(≒0.866)になりますね。cos30°は有名角の1つなので、我々のような数学赤点民もかつてはこの値を暗記したのではないでしょうか。
正三角形の1辺が1だとすると、直角三角形の底辺は1/2です。よって、正三角形の高さは√3/2になります。cos30°の値と同じですね。正三角形の横:縦は1:√3/2になるのです。
なお、aspect-ratio: 1 / sin(60deg);でも正三角形が作れます。この場合、基準となる角を∠BAD=60°として、先程の図で隣辺となってるところが対辺になり、sin60°=対辺/斜辺でcos30°と同じ比率になります。sin60°の値も√3/2ですからね。
また、sqrt()を使って縦横比を1:√3/2にしても正三角形になります。sqrt()は平方根を求めるCSSの値関数です。
aspect-ratio: 1 / calc(sqrt(3) / 2);このように、比率の指定の仕方は色々あります。
直角二等辺三角形を作る
clip-pathとaspect-ratioで直角二等辺三角形も作成できます。直角二等辺三角形は直角を挟む2辺の長さが等しい三角形です。
<div class="isosceles_right_triangle"></div>.isosceles_right_triangle{
width: 200px;
clip-path: polygon(100% 0, 100% 100%, 0 100%);
aspect-ratio: 1;
background-color: #add4f6;
}直角二等辺三角形を作るにはまず直角ができるように座標を配置して、その直角を挟む横(底辺)と縦(高さ)の比を1:1にすればOKです。確実且つ手軽に直角ができる座標は下記の4パターンですね。
clip-pathで直角三角形を作り、aspect-ratio: 1;でアスペクト比を1:1に指定しているので直角を挟む2辺の長さが等しくなり、直角二等辺三角形になります。
三角形を使ったデザインサンプル
三角形を使ったデザインのサンプルをいくつかご紹介します。
アイコン
リストなどのアイコンに三角形が使えます。
- スコティッシュフォールド
- アメリカンショートヘア
- マンチカン
- ラグドール
<ul class="triangle_icon_sample">
<li class="right">スコティッシュフォールド</li>
<li class="bottom">アメリカンショートヘア</li>
<li class="left">マンチカン</li>
<li class="top">ラグドール</li>
</ul>.triangle_icon_sample li{
padding-left: 5px;
list-style: none;
position: relative;
margin: .2em;
}
.triangle_icon_sample li::before,.triangle_icon_sample li::after{
content: '';
position: absolute;
}
.triangle_icon_sample li::before{
top: 9px;
left: -1em;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: #333;
}
.triangle_icon_sample li::after{
width: 12px;
aspect-ratio: 2;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
background-color: #fff;
}
/*右向き三角*/
.triangle_icon_sample .right::after{
rotate: 90deg;
top: 15px;
left: -14px;
}
/*下向き三角*/
.triangle_icon_sample .bottom::after{
rotate: 180deg;
top: 16px;
left: -15px;
}
/*左向き三角*/
.triangle_icon_sample .left::after{
rotate: -90deg;
top: 15px;
left: -16px;
}
/*上向き三角*/
.triangle_icon_sample .top::after{
top: 14px;
left: -14px;
}
/*スマホ用*/
@media screen and (max-width: 480px){
.triangle_icon_sample li::after{
margin-left: 1px;
}
}疑似要素の::beforeで背景の丸を作って、::afterで三角形を作ってます。aspect-raito: 2;を設定してるので、横2に対して縦1の比率の三角形になります。矢印の向きはrotate()で回転させてます。利用する際は適宜調整してください。
吹き出し
三角形と四角形や丸を組み合わせて吹き出しが作成できます。組み合わせる形によって印象が違ってきます。
角丸の四角形と正三角形を組み合わせた一般的で使いやすい吹き出しです。テキスト量によって吹き出しの幅と高さが変化するので、長文にも対応できます。
<div class="baloon_sample_01">ふきだしだにゃ</div>.baloon_sample_01{
position: relative;
background-color: #add4f6;
color: #333;
padding: 10px;
width: fit-content;
border-radius: 8px;
margin-left: 20px;
}
.baloon_sample_01::before{
position: absolute;
content: '';
top: 50%;
left: -14px;
transform: translateY(-50%);
width: 16px;
aspect-ratio: 1 / cos(30deg);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
rotate: 30deg;
background-color: #add4f6;
}円にシャープな三角形を組み合わせた吹き出しです。これは幅と高さが固定なので、長文には向かないです。ワンポイントに使ってください。
<div class="baloon_sample_02">ふきだしだにゃ</div>.baloon_sample_02{
position: relative;
display: grid;
place-items: center;
width: 130px;
height: 130px;
border-radius: 50%;
background-color: #add4f6;
padding: 10px;
font-size: .8em;
margin-bottom: 4em;
}
.baloon_sample_02::before{
position: absolute;
top: 86%;
right: 35%;
content: '';
width: 20px;
height: 50px;
clip-path: polygon(0 0, 100% 0, 80% 100%);
background-color: #add4f6;
rotate: 30deg;
}まとめ
clip-pathなら座標の置き方によって様々な三角形が作成できますし、aspect-ratioを併用することで比率が正確な三角形も作成でき、borderよりも使いやすいと思います。
ただ、clip-pathで作成した図形に枠線をつけるのが結構難しく、枠線がもっと手軽につけれれば更に使いやすくなるのにな～と思います。
三角関数の部分は数学わからないなりに考えてみたのですが、間違ってたらこっそり教えてください…！
