画像を使わずにCSSだけで三角・矢印を作る方法

簡単な三角形・矢印はCSSで作られてる方も多いと思いますが、今回は忘備録もかねて三角形・矢印のデザイン例を紹介します。文章のポイントで強調したい時や、テキストリンクの先頭にアイコンで配置したい時など重宝します。

コピペで使用する場合はフォントサイズによってアイコンの位置等がズレてしまいますのでCSSを調整して下さい。



CSSで作る三角・矢印




1

CSSで作る三角(右向き)

borderプロパティを使用し作成します。右向きの場合はborder-left左向きの場合はborder-rightと作成したい向きの反対側のborderのカラーを設定し、他はtransparentでボーダーの色を透明にします。

html
<div class="triangle01"></div>

CSS
.triangle01{ 
	width: 0;
	height: 0;
	border-top: solid 15px transparent;
	border-right: solid 15px transparent;
	border-bottom: solid 15px transparent;
	border-left: solid 15px #697b91;
}
2

CSSで作る矢印(其の1)

borderプロパティを使用し作成します。border2辺の線幅とカラーを指定し、transform: rotate(45deg);で角度と変えて形成します。

html
<div class="arrow01"></div>

CSS
.arrow01 {
	display: block;
	width: 15px;
	height: 15px;
	border-top: solid 3px #697b91;
	border-right: solid 3px #697b91;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
3

CSSで作る矢印(其の2)

::before擬似要素を使い、三角を長方形を組み合わせ形成します。

html
<div class="arrow02"></div>

CSS
.arrow02 {
	position:relative;
	height:16px;
	width:16px;
	background-color:#697b91;
}

.arrow02::before {
	position:absolute;
	content:"";
	border:solid 16px transparent;
	border-left:solid 16px #697b91;
	top:-8px;
	left:12px;
}

アイコンとして使う三角・矢印



1

三角アイコン


文頭の矢印アイコンを付けるCSS
html
<div class="arrow03">文頭の矢印アイコンを付けるCSS</div>

CSS
.arrow03 {
	position: relative;
	padding-left: 13px;
}
.arrow03::before {
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	border: solid 6px transparent;
	border-left: solid 8px #697b91;
	top: 50%;
	left: 0;
	margin-top: -5px;
}
2

背景付き三角アイコン


文頭の矢印アイコンを付けるCSS
html
<div class="arrow04">文頭の矢印アイコンを付けるCSS</div>

CSS
.arrow04 {
	position: relative;
	padding-left: 22px;
}
.arrow04::before {
	position: absolute;
	content: '';
	width: 16px;
	height: 16px;
	background: #697b91;
	border-radius: 50%;
	top: 50%;
	left: 0;
	margin-top: -7px;
}
.arrow04::after {
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	border: solid 4px transparent;
	border-left: solid 6px #fff;
	top: 50%;
	left:6px;
	margin-top: -3px;
}
3

矢印(山括弧)アイコン


文頭の矢印アイコンを付けるCSS
html
<div class="arrow05">文頭の矢印アイコンを付けるCSS</div>

CSS
.arrow05 {
	position: relative;
	padding-left: 15px;
}
.arrow05::before {
	position: absolute;
	content: '';
	width: 6px;
	height: 6px;
	border-top: solid 2px #697b91;
	border-right: solid 2px #697b91;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 0;
	margin-top: -3px;
}
4

背景付き矢印(山括弧)アイコン


文頭の矢印アイコンを付けるCSS
html
<div class="arrow06">文頭の矢印アイコンを付けるCSS</div>

CSS
.arrow06 {
	position: relative;
	padding-left: 22px;
}
.arrow06::before {
	position: absolute;
	content: '';
	width: 17px;
	height: 17px;
	background: #697b91;
	border-radius: 50%;
	top: 50%;
	left: 0;
	margin-top: -7px;
}
.arrow06::after {
	position: absolute;
	content: '';
	width: 4px;
	height: 4px;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 5px;
	margin-top: -1px;
}
5

矢印アイコン


文頭の矢印アイコンを付けるCSS
html
<div class="arrow07">文頭の矢印アイコンを付けるCSS</div>

CSS
.arrow07 {
	position: relative;
	padding-left: 18px;
}
.arrow07::before {
	position: absolute;
	content: '';
	width:6px;
	height:6px;
	background-color:#697b91;
	top: 50%;
	left: 0;
	margin-top: -2px;
}
.arrow07::after {
	position:absolute;
	content:"";
	border:solid 7px transparent;
	border-left:solid 7px #697b91;
	top: 50%;
	left: 5px;
	margin-top: -6px;
}

CSSのみで三角・矢印を作る方法の紹介でした。使用頻度の多い右向きの三角・矢印の作り方でしたが、上向き・下向き・左向きもCSSを調整すれば簡単に作ることができるので参考にしてみてください。