HOME >
CSS >
CSSだけで三角や矢印を作る方法【borderプロパティ】

CSSだけで三角や矢印を作る方法【borderプロパティ】

投稿日:2022年01月21日（最終更新日:2022年02月12日）

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

三角や矢印はCSSだけで表示できる？

三角や矢印は見出しやボタンに取り入れることでユーザーの視線を誘導したり、アクションを促す効果が期待できます。

既存のプロパティの特性をうまく応用すれば、画像を使わなくてもCSSだけで作り出すことが可能です。

CSSで三角を作る

三角はborderプロパティを応用することで作り出せます。

記述方法

要素の幅と高さをゼロにし、上下左右の任意の一方向にだけborder-colorを表示させて残り3方向は透明にすると三角が表示されます。

CSS

.sankaku{
    width:0px;
    height:0px;
    border-top:solid 100px transparent;
    border-bottom:solid 100px transparent;
    border-left:solid 100px #333;
    border-right:solid 100px transparent;
}

HTML

<div class="sankaku">
</div>

border-colorで色を付ける方向を変更すれば三角の向きを、各方向のborderの幅を変更すれば三角の大きさが変更できます。

どうして三角になるのか？

枠線を表示するborderでどうして三角が表示できるのか、順を追って解説します。

解説が不要の方は読み飛ばして次の項に進んで下さい。

ここでは、わかりやすいように幅と高さが100px、borderも色分けして幅も100pxにした要素を用意します。

border-bottomを透明にします。

border-topとborder-rightも透明にすると三角に近づいていきます。

要素が高さを持っているため、1辺多い状態です。最後に幅と高さをゼロにすることで三角の完成です。

表示は三角でも要素としての形状は四角のままなので、レイアウトに組み込む際は注意が必要です。

疑似要素を使用して表示

三角や矢印のように単体では情報を持たないデザインや装飾のみに使うものは、HTMLではなくCSSの疑似要素で表示することをお勧めします。

CSS

.sankaku{
    padding-left: 15px;
    position:relative;
}
.sankaku:before{
    content:"";
    display: inline-block;
    width:0px;
    height:0px;
    border-top:solid 10px transparent;
    border-bottom:solid 10px transparent;
    border-left:solid 10px #333;
    border-right:solid 10px transparent;
    position:absolute;
    top:0;
    left: 0;
}

HTML

<div class="sankaku">
ダミーテキスト
</div>

プレビュー

before要素で三角を作り、positionを指定して表示位置を調整しています。

CSSで矢印を作る

三角を作ることができれば矢印も簡単にできます。

別途、backgroundプロパティで四角を作り三角にくっつければ完成です。

先程のbefore要素の三角に加えて、after要素で四角を作りpositionで位置を調整して一つの矢印に見えるようにします。

CSS

.sankaku{
    padding-left:20px;
    position:relative;
}
.sankaku:before{
    content:"";
    display: inline-block;
    width:0px;
    height:0px;
    border-top:solid 10px transparent;
    border-bottom:solid 10px transparent;
    border-left:solid 10px #333;
    border-right:solid 10px transparent;
    position:absolute;
    top:0;
    left:10px;
}
.sankaku:after{
    content:"";
    display: inline-block;
    width:10px;
    height:10px;
    background: #333;
    position:absolute;
    top:5px;
    left: 0;
}

HTML

<div class="sankaku">
ダミーテキスト
</div>

プレビュー

矢印が出来上がる仕組みを解説

疑似要素を用いてどのように矢印ができあがるのか、順を追って解説します。

解説が不要の方は読み飛ばして次の項に進んで下さい。

before要素で三角、after要素で四角を作ると下図のようになります。

あとはそれぞれpositionを調整し、一つの矢印に見えるようにしたら完成です。

線のみの矢印

もうひとつ、線のみのシンプルな矢印をCSSで作る方法を説明します。

borderで2辺を作り、transformプロパティで回転させるという方法です。

CSS

.sankaku{
    padding-left:15px;
    position:relative;
}
.sankaku:before{
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-top: solid 3px #d95455;
    border-right: solid 3px #d95455;
    transform:rotate(45deg);
    position: absolute;
    top:8px;
    left:0px;
    z-index: 2;
}

HTML

<div class="sankaku">ダミーテキスト
</div>

プレビュー

CSSによる三角と矢印のデザイン例

上記の作成方法を基本としてスタイルをカスタマイズすれば、CSSだけで色々なデザインの三角や矢印を作ることができます。

丸の中に三角を入れたアイコン

丸と三角をそれぞれ用意し、positionプロパティで重ね合わせれば完成です。

CSS

.sankaku{
    padding-left:20px;
    position:relative;
}
.sankaku:before{
    content: "";
    display: inline-block;
    width: 0px;
    height: 0px;
    border-top: solid 30px transparent;
    border-bottom: solid 30px transparent;
    border-left: solid 50px #fff;
    border-right: solid 30px transparent;
    position: absolute;
    top: 20px;
    left: 30px;
    z-index: 2;
}
.sankaku:after{
    content:"";
    width:100px;
    height: 100px;
    background:#d95455;
    border-radius: 50%;
    position: absolute;
    top:0;
    left:0;
    z-index: 1;
}

HTML

<div class="sankaku">
</div>

丸の中に三角矢印を入れたアイコン

中に配置した三角を矢印に変えるだけで完成です。

CSS

.sankaku{
    padding-left:25px;
    position:relative;
}
.sankaku:before{
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    border-top: solid 10px #fff;
    border-right: solid 10px #fff;
    transform:rotate(45deg);
    position: absolute;
    top:30px;
    left:20px;
    z-index: 2;
}
.sankaku:after{
    content:"";
    width:100px;
    height: 100px;
    background:#d95455;
    border-radius: 50%;
    position: absolute;
    top:0;
    left:0;
    z-index: 1;
}

HTML