緩やかな矢印 HTML CSS [HTML, CSS]

作った理由

内角が160度の矢印が欲しかったのですが，インターネットで検索をかけても内角45°の矢印が大量に紹介されてそれ以外の矢印が見つからなかったので自分で作ることにしました．

実装方法

角度をつけた棒を2本並べて矢印にしています．それをdivで囲ってまとめて扱えるようにしています．以下の画像のものができます．

HTML，CSSコード（見やすくするため両方まとめて書いてある．）

<style>
	.bar {
		position: relative;
		background-color: black;
		width: 3px;
		height: 55px;
		border-radius: 50px;
	}

	.top {
		transform: skew(10deg);
	}

	.under {
		transform: skew(-10deg);
		top: -3px;
	}

	.arrow {
		width: 20px;
		filter: opacity(50%);

	}

</style>

<div class="arrow">
	<div class="bar top"></div>
	<div class="bar under"></div>
</div>

<style>部分はCSSコードなのでCSSファイルに記述しても問題ありません．barクラスでは線の色と大きさを設定しています．top，underクラスではskewを用いて要素をゆがませています．縦に伸びる棒をtopは反時計回りに10度，underは時計回りに10度歪ませているので結果として内角160度の矢印ができます．

注意点

この方法を使えばあらゆる角度の矢印を作ることができますが，skewを用いて線をゆがませているためSkewの角度が大きくなると（内角を小さくすると）棒の端が不自然な形になってしまいます．内角が45の時は以下のようになります．

このように矢印の先端と端がきれいな半円形となりません．使用する際はこの点に注意してください．

まとめ

今回はSkewを用いて内角160度の緩やかな矢印をHTML，CSSのみを用いて作りました．外側のdiv要素に設定を行えばボタンとして使ったりすることもできます．ぜひ用いてみてください．