概要
リンクのアイコンなどに使用する三角アイコンをCSSだけで作ります。
私自身はclip-path版を推しています。こちらの記事もどうぞ。
実装結果
解説
なぜCSSで三角形ができるかの解説です。
1.まず四角を作成します。
<style>
.tri {
width: 200px;
height: 200px;
background-color: #aaaaaa;
}
</style>2.四方に60pxのborderを追加します。わかりやすいようにすべて違う色にしています。
<style>
.tri {
width: 200px;
height: 200px;
border-left: 60px solid #ff0000;
border-right: 60px solid #00ff00;
border-top: 60px solid #0000ff;
border-bottom: 60px solid #ff00ff;
background-color: #aaaaaa;
}
</style>3.四角の横幅、高さを0pxにします。
.tri {
width: 0;
height: 0;
border-left: 60px solid #ff0000;
border-right: 60px solid #00ff00;
border-top: 60px solid #0000ff;
border-bottom: 60px solid #ff00ff;
background-color: #aaaaaa;
}
</style>4.緑部分は必要ないのでボーダーの幅を0pxにします。
<style>
.tri {
width: 0;
height: 0;
border-left: 60px solid #ff0000;
border-right: 0 solid #00ff00;
border-top: 60px solid #0000ff;
border-bottom: 60px solid #ff00ff;
background-color: #aaaaaa;
}
</style>5.背景色と赤以外のボーダーはいらないので、背景は削除、ボーダーは透明にします。
<style>
.tri {
width: 0;
height: 0;
border-left: 60px solid #ff0000;
border-right: 0 solid transparent;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
}
</style>完成！
ボーダーの幅を変更することで三角形の形を変更することができます。
<style>
.tri {
width: 0;
height: 0;
border-left: 120px solid #ff0000;
border-right: 0 solid transparent;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
}
</style><style>
.tri {
width: 0;
height: 0;
border-left: 60px solid #ff0000;
border-right: 0 solid transparent;
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
}
</style>
