CSSだけで三角・矢印を作る方法
Web制作で三角・矢印を使用したい場合、CSSのborderプロパティで三角・矢印を作成することができます。カラーやサイズを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: -6px;
}
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: -8px;
}
.arrow04::after {
position: absolute;
content: '';
width: 0;
height: 0;
border: solid 4px transparent;
border-left: solid 6px #fff;
top: 50%;
left:6px;
margin-top: -4px;
}
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: -4px;
}
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: -3px;
}
.arrow07::after {
position:absolute;
content:"";
border:solid 7px transparent;
border-left:solid 7px #697b91;
top: 50%;
left: 5px;
margin-top: -7px;
}
＼ Webデザインに関するお役立ち情報を定期的に配信中 ／
