CSSで三角形を作る(border版)

Updated: 2023.06.12
Published: 2021.09.11
1,611views

概要

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

私自身はclip-path版を推しています。こちらの記事もどうぞ。

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>