画像を使わずに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を調整すれば簡単に作ることができるので参考にしてみてください。

CSSで簡単に作れるおしゃれな見出しデザイン

design.webclips.jp/css-midashi-ribon/



PICK UP
RELATED POSTS
  • 2択のUIデザインから正しいデザインを選択していくゲーム「Can’t Unsee」
  • 様々なエフェクトを実装できるパーティクルエンジン「Proton」
  • 【jQuery】いろんなエフェクトの背景画像カルーセル「Crosscover」
  • 【JS】簡単な記述でCSSアニメーションを実装できる「AniJS」
  • 【CSS】色々と使える疑似クラス:nth-child()の実用例
  • 様々なチャートを生成できるライブラリ「TOAST UI Chart」
POPULAR POSTS
  • 長いURLを短くするオススメの短縮URLサービス
  • 無料で使えるおしゃれな英語の筆記体フリーフォントまとめ
  • 漢字が使えるおすすめの日本語フリーフォントまとめ
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2019年7月版】
  • CSSグラデーションの作成に役立つジェネレーター・Webサービスまとめ
RECENT POSTS
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2019年7月版】
  • プライス・値段表示などに使えそうな英数字フォント13選
  • 無料で使えるレトロ・ヴィンテージな雰囲気の英語フォントまとめ
  • Photoshopで簡単に背景を伸ばすテクニック
  • CSSで作成する吹き出しとデザインのアイデア