【CSS】clip-pathで作る、くの字矢印・正三角形・丸囲み三角の矢印アイコンサンプル集（borderを使わない）
以前は三角形はborderで作るのが主流でしたが、今はclip-pathで作るのがシンプルで直感的、ということであらためてサンプル集を作ったので載せておきます。
目次 
clip-pathで作る矢印アイコンのサンプル集
くの字矢印（右）
コードを見る
<p class="btn btn-arrow-right">
<a href="#">くの字矢印（右）</a>
</p>/* ボタンのスタイル */
.btn a {
position: relative;
display: block;
width: 280px;
padding: 15px 0;
background-color: #6784d3;
border-radius: 8px;
font-size: 14px;
color: #fff;
text-decoration: none;
text-align: center;
}
/* アイコンのスタイル */
.btn-arrow-right a::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 20px;
margin: auto;
background-color: #fff;
/* 大きさ */
width: 15px;
height: 15px;
/* くの字（右向き） */
clip-path: polygon(40% 0, 90% 50%, 40% 100%, 30% 90%, 70% 50%, 30% 10%);
}くの字矢印（下）
コードを見る
<p class="btn btn-arrow-bottom">
<a href="#">くの字矢印（下）</a>
</p>/* ボタンのスタイル */
.btn a {
position: relative;
display: block;
width: 280px;
padding: 15px 0;
background-color: #6784d3;
border-radius: 8px;
font-size: 14px;
color: #fff;
text-decoration: none;
text-align: center;
}
/* アイコンのスタイル */
.btn-arrow-bottom a::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 20px;
margin: auto;
background-color: #fff;
/* 大きさ */
width: 15px;
height: 15px;
/* くの字（下向き） */
clip-path: polygon(100% 40%, 50% 90%, 0 40%, 10% 30%, 50% 70%, 90% 30%);
}くの字矢印（上）
コードを見る
<p class="btn btn-arrow-top">
<a href="#">くの字矢印（上）</a>
</p>/* ボタンのスタイル */
.btn a {
position: relative;
display: block;
width: 280px;
padding: 15px 0;
background-color: #6784d3;
border-radius: 8px;
font-size: 14px;
color: #fff;
text-decoration: none;
text-align: center;
}
/* アイコンのスタイル */
.btn-arrow-top a::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 20px;
margin: auto;
background-color: #fff;
/* 大きさ */
width: 15px;
height: 15px;
/* くの字（上向き） */
clip-path: polygon(90% 70%, 50% 30%, 10% 70%, 0 60%, 50% 10%, 100% 60%);
}三角矢印（右）
コードを見る
<p class="btn btn-triangle-right">
<a href="#">三角矢印（右）</a>
</p>/* ボタンのスタイル */
.btn a {
position: relative;
display: block;
width: 280px;
padding: 15px 0;
background-color: #6784d3;
border-radius: 8px;
font-size: 14px;
color: #fff;
text-decoration: none;
text-align: center;
}
/* アイコンのスタイル */
.btn-triangle-right a::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 20px;
margin: auto;
background-color: #fff;
/* 大きさ */
width: calc(15px * cos(30deg)); /* 正三角形にするための計算 */
height: 15px;
/* 三角形（右向き） */
clip-path: polygon(0 0, 100% 50%, 0 100%);
}三角矢印（下）
コードを見る
<p class="btn btn-triangle-bottom">
<a href="#">三角矢印（下）</a>
</p>/* ボタンのスタイル */
.btn a {
position: relative;
display: block;
width: 280px;
padding: 15px 0;
background-color: #6784d3;
border-radius: 8px;
font-size: 14px;
color: #fff;
text-decoration: none;
text-align: center;
}
/* アイコンのスタイル */
.btn-triangle-bottom a::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 20px;
margin: auto;
background-color: #fff;
/* 大きさ */
width: 15px;
height: calc(15px * cos(30deg)); /* 正三角形にするための計算 */
/* 三角形（下向き） */
clip-path: polygon(50% 100%, 0 0, 100% 0);
}三角矢印（上）
コードを見る
<p class="btn btn-triangle-top">
<a href="#">三角矢印（上）</a>
</p>/* ボタンのスタイル */
.btn a {
position: relative;
display: block;
width: 280px;
padding: 15px 0;
background-color: #6784d3;
border-radius: 8px;
font-size: 14px;
color: #fff;
text-decoration: none;
text-align: center;
}
/* アイコンのスタイル */
.btn-triangle-top a::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 20px;
margin: auto;
background-color: #fff;
/* 大きさ */
width: 15px;
height: calc(15px * cos(30deg)); /* 正三角形にするための計算 */
/* 三角形（上向き） */
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}丸囲みの三角矢印（右）
コードを見る
<p class="btn btn-circle-right">
<a href="#">丸囲みの三角矢印（右）</a>
</p>/* ボタンのスタイル */
.btn a {
position: relative;
display: block;
width: 280px;
padding: 15px 0;
background-color: #6784d3;
border-radius: 8px;
font-size: 14px;
color: #fff;
text-decoration: none;
text-align: center;
}
/* アイコンのスタイル（丸い部分） */
.btn-circle-right a::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 20px;
width: 22px;
height: 22px;
margin: auto;
background-color: #fff;
clip-path: circle(50%);
}
/* アイコンのスタイル（三角の部分） */
.btn-circle-right a::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 24px;
margin: auto;
background-color: #6784d3;
/* 大きさ */
width: calc(12px * cos(30deg)); /* 正三角形にするための計算 */
height: 12px;
/* 三角形（右向き） */
clip-path: polygon(0 0, 100% 50%, 0 100%);
}丸囲みの三角矢印（下）
コードを見る
<p class="btn btn-circle-bottom">
<a href="#">丸囲みの三角矢印（下）</a>
</p>/* ボタンのスタイル */
.btn a {
position: relative;
display: block;
width: 280px;
padding: 15px 0;
background-color: #6784d3;
border-radius: 8px;
font-size: 14px;
color: #fff;
text-decoration: none;
text-align: center;
}
/* アイコンのスタイル（丸い部分） */
.btn-circle-bottom a::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 20px;
width: 22px;
height: 22px;
margin: auto;
background-color: #fff;
clip-path: circle(50%);
}
/* アイコンのスタイル（三角の部分） */
.btn-circle-bottom a::after {
content: '';
position: absolute;
top: 2px;
bottom: 0;
right: 25px;
margin: auto;
background-color: #6784d3;
/* 大きさ */
width: 12px;
height: calc(12px * cos(30deg)); /* 正三角形にするための計算 */
/* 三角形（下向き） */
clip-path: polygon(50% 100%, 0 0, 100% 0);
}丸囲みの三角矢印（上）
コードを見る
<p class="btn btn-circle-top">
<a href="#">丸囲みの三角矢印（上）</a>
</p>/* ボタンのスタイル */
.btn a {
position: relative;
display: block;
width: 280px;
padding: 15px 0;
background-color: #6784d3;
border-radius: 8px;
font-size: 14px;
color: #fff;
text-decoration: none;
text-align: center;
}
/* アイコンのスタイル（丸い部分） */
.btn-circle-top a::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 20px;
width: 22px;
height: 22px;
margin: auto;
background-color: #fff;
clip-path: circle(50%);
}
/* アイコンのスタイル（三角の部分） */
.btn-circle-top a::after {
content: '';
position: absolute;
top: 0;
bottom: 2px;
right: 25px;
margin: auto;
background-color: #6784d3;
/* 大きさ */
width: 12px;
height: calc(12px * cos(30deg)); /* 正三角形にするための計算 */
/* 三角形（上向き） */
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}【ざっくり解説】clip-pathで作る三角形
clip-pathの名の通りクリッピングパスで切り抜いている
下記のように元々の要素（四角形）を三角形のパスで切り抜いて見ているイメージです。
SAMPLE IMAGE
sample image
↓
SAMPLE IMAGE
sample image
大きさを調整したい時にborderよりわかりやすい
borderの時はサイズ変更したい時に直感的でなかったのですが、clip-pathだとwidthとheightを変えるだけです。
.triangle-small {
width: 40px;
height: 20px;
background: #ba2282;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.triangle-large {
width: 100px;
height: 140px;
background: #ba2282;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}正三角形にする方法
正三角形にするには幅と高さの比率を1:√3/2にする必要があるため、今回はcalc（計算式）を使って値を指定しています。（右向き三角の場合は高さが1、幅が√3/2）
width: 12px;
height: calc(12px * cos(30deg)); /* 正三角形にするための計算 */ちなみにaspect-ratioというアスペクト比を指定するやり方もあるのですが、親要素にflexがあるとうまく効かない等があるため、calcを使っています。
clip-pathで他にも色々な形を作れる
今回サンプルのくの字矢印と三角形を作るために使ったのはclip-pathのpolygon（多角形）プロパティ。くの字矢印の場合は6つの頂点、三角形の場合は3つの頂点の座標をそれぞれ指定することで実現しています。
またpolygon以外にもcircle（円形）など他のプロパティもあり、circleも今回サンプルの丸囲みのところで使いました。工夫次第で様々な形を作れるのでclip-pathの可能性は無限大。
.circle {
width: 100px;
height: 100px;
background-color: #9faff4;
clip-path: circle(50%);
}
.polygon-arrow01 {
width: 100px;
height: 100px;
background-color: #db9be9;
clip-path: polygon(60% 0%, 100% 50%, 60% 100%, 0% 100%, 45% 50%, 0% 0%);
}
.polygon-arrow02 {
width: 100px;
height: 100px;
background-color: #f1caf4;
clip-path: polygon(5% 30%, 60% 30%, 60% 5%, 100% 50%, 60% 95%, 60% 70%, 5% 70%);
}まとめ
clip-pathで作る三角形は、今回のようなアイコンだけでなくセクションの区切りとして使ったり何かと便利です。
数年前に書いた、borderを使った三角アイコンの記事はこちら↓
常に変わっていくのでアップデートしていかないとですね。
