リンクのアイコンなどに使用する三角アイコンをCSSだけで作ります。

実装結果

解説

なぜ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>

テスト

triangle