CSSのlinear-gradientプロパティで三角形を作る
2024-04-02
CSSで三角形を作る仕組み
- border プロパティを使う
- clip-path プロパティを使う
border プロパティを使って三角形を作るには、以下の3つのステップが必要です。
- 対象となる要素に
borderプロパティを設定します。 border-styleプロパティをsolidに設定します。border-widthプロパティで、三角形の辺の太さを設定します。
例：border プロパティを使って正三角形を作る
.triangle {
width: 100px;
height: 100px;
border: 10px solid black;
border-top-color: transparent;
border-left-color: transparent;
}
このコードでは、.triangle クラスの要素に border プロパティを設定しています。
widthプロパティとheightプロパティで、三角形のサイズを指定しています。border-top-colorプロパティとborder-left-colorプロパティをtransparentに設定することで、上辺と左辺の枠線を透明にします。
この結果、以下の図のような正三角形が作成されます。
- 二等辺三角形
.triangle {
width: 100px;
height: 50px;
border: 10px solid black;
border-bottom-color: transparent;
}
- 直角三角形
.triangle {
width: 100px;
height: 100px;
border: 10px solid black;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
}
clip-pathプロパティの値として、三角形の形状を指定します。
.triangle {
width: 100px;
height: 100px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
polygon()関数の引数は、三角形の頂点の座標をカンマ区切りで指定します。- この例では、頂点を
(50%, 0%)、(0%, 100%)、(100%, 100%)としているので、正三角形になります。
.triangle {
width: 100px;
height: 50px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.triangle {
width: 100px;
height: 100px;
clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
}
CSSで三角形を作るには、border プロパティと clip-path プロパティの2つの方法があります。
clip-path
border プロパティを使ったサンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSで三角形を作る</title>
</head>
<body>
<h1>`border` プロパティを使った三角形</h1>
<div class="triangle"></div>
<div class="triangle equilateral"></div>
<div class="triangle isosceles"></div>
<div class="triangle right-angled"></div>
<style>
.triangle {
width: 100px;
height: 100px;
border: 10px solid black;
}
.triangle.equilateral {
border-top-color: transparent;
border-left-color: transparent;
}
.triangle.isosceles {
border-bottom-color: transparent;
}
.triangle.right-angled {
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
}
</style>
</body>
</html>
clip-path プロパティを使ったサンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSで三角形を作る</title>
</head>
<body>
<h1>`clip-path` プロパティを使った三角形</h1>
<div class="triangle"></div>
<div class="triangle equilateral"></div>
<div class="triangle isosceles"></div>
<div class="triangle right-angled"></div>
<style>
.triangle {
width: 100px;
height: 100px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.triangle.equilateral {
clip-path: polygon(50% 0%, 0% 50%, 100% 50%);
}
.triangle.isosceles {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.triangle.right-angled {
clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
}
</style>
</body>
</html>
実行方法
- 上記のコードをHTMLファイルに保存します。
- ブラウザでHTMLファイルを開きます。
説明
borderプロパティを使ったサンプルコードでは、border-widthプロパティ、border-colorプロパティ、border-radiusプロパティなどを組み合わせることで、さまざまな形状の三角形を作成しています。clip-pathプロパティを使ったサンプルコードでは、polygon()関数の引数を変えることで、さまざまな形状の三角形を作成しています。
CSSで三角形を作るその他の方法
linear-gradient プロパティを使って、三角形のグラデーションを作成し、それを背景として使用することで、三角形を作ることができます。
.triangle {
width: 100px;
height: 100px;
background: linear-gradient(to bottom, transparent 50%, black 50%);
}
to bottomは、グラデーションの方向を上から下へ指定しています。transparent 50%は、グラデーションの開始位置から50%までの間を透明に指定しています。
before 疑似要素と after 疑似要素を使って、三角形の形状をしたコンテンツを生成することができます。
.triangle {
width: 100px;
height: 100px;
position: relative;
&::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid black;
transform: translate(-50%, -50%);
}
}
content: ""は、疑似要素内に何も表示しないことを指定しています。position: absoluteは、疑似要素を絶対配置にすることを指定しています。top: 50%とleft: 50%は、疑似要素を親要素の中央に配置することを指定しています。width: 0とheight: 0は、疑似要素のサイズを0にすることを指定しています。border-leftとborder-rightは、左右の枠線を透明に設定しています。border-bottomは、下部の枠線を黒に設定しています。transform: translate(-50%, -50%)は、疑似要素を左上方向に50%ずつ移動することを指定しています。
[図：before 疑似要素と after 疑似要素を使って作った三角形]
svg 要素を使って、三角形のパスを描画することができます。
<svg viewBox="0 0 100 100">
<polygon points="50,0 0,100 100,100" fill="black" />
</svg>
このコードは、svg 要素の中に polygon 要素を描画しています。
viewBox="0 0 100 100"は、SVG要素の表示領域を100px x 100pxに設定しています。points="50,0 0,100 100,100"は、三角形の頂点の座標を指定しています。fill="black"は、三角形の色を黒に設定しています。
[図：svg 要素を使って作った三角形]
CSSで三角形を作る方法は、border プロパティ、clip-path プロパティ、linear-gradient プロパティ、before 疑似要素と after 疑似要素、svg 要素など、さまざまな方法があります。
それぞれの方法にはメリットとデメリットがあるので、目的に合った方法を選択する必要があります。
css geometry polygon
