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

  • Updated: 2023.06.12
  • Published: 2021.09.11
  • 1,038views
  • CSS

概要

リンクのアイコンなどに使用する三角アイコンを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>

テスト

triangle

関連記事

人気の投稿

最新の投稿

タグ

月別アーカイブ

Contact

WEB制作の依頼など気軽にお問い合わせください。

お問い合わせ