CSSで矢印の角度を変える（90度以外にする）方法

CSSで矢印を作る方法は多く紹介されていますが、その矢印の角度は決まって90度です。

しかし矢印は90度だけではありません。
狭い角度や広い角度の矢印もあります。

そんな角度を変えられる矢印の作り方を説明します。

矢印1.細い線の矢印 「＞」

html

<span class="kakudo"></span>

CSS

.kakudo{
    display: block;
    width: 60px;
    height: 60px;
    border: 1px solid #f2f2f2;
    position: relative;
}

.kakudo::before,.kakudo::after{
    content: "";
    display: block;
    width: 50px;/*線の長さ*/
    height: 10px;/*線の太さ*/
    background: #333;/*線の色*/
    position: absolute;
    top: calc(50% - 5px);
    right: 0;
    border-radius: 100px;
    transform: rotate(30deg);
    transform-origin:calc(100% - 5px) 50%;
}    
.kakudo::after{
    transform: rotate(-30deg);
}

2つの直線をくっつけて、そこを軸に角度を変えています。
角丸は必須です。

計算方法

.kakudo::before,.kakudo::afterのheight=線の太さ=a

.kakudo::before,.kakudo::afterのtop=calc(50% - a/2)
transform-origin:calc(100% - a/2) 50%;

.kakudo::beforeのtransform: rotate( B deg);
.kakudo::after のtransform: rotate( -B deg);
Bは水平を0としたときの角度です。

矢印2.三角矢印「▲」

html

<span class="kakudo2"></span>

CSS

.kakudo2{
    display: block;
    width: 60px;
    height: 60px;
    border: 1px solid #f2f2f2;
    position: relative;        
}
.kakudo2::before{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left:40px solid #333;
    border-top:20px solid transparent;
    border-bottom:20px solid transparent;
}

三角矢印の場合は角度の指定はありません。
border-widthの数字を調整してください。

矢印の向きを変える（45度単位）

単に矢印の向きを変えたいという意味での角度変更であれば「transform:rotate(Xdeg)」を使います。

角度はこちらの記事で一覧表示していますので参考にしてみてください。

まとめ

細い線の矢印 「＞」 と 三角矢印「▲」の角度を変える方法を紹介しました。

以上、CSSで矢印の角度を変える（90度以外にする）方法でした。