矢印アイコン をCSSだけで作る!上向き・下向き・横向き

矢印アイコン をCSSだけで作る!上向き・下向き・横向き

矢印アイコン をCSSだけで作る!上向き・下向き・横向き

矢印アイコン

demo

横向き 矢印アイコン

CSS

#sample01 a{
position: relative;
display: inline-block;
padding: 0 0 0 16px;
color: #000;
vertical-align: middle;
text-decoration: none;
font-size: 15px;
}
#sample01 a::before,
#sample01 a::after{
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}
#sample01 a::before{
left: 3px;
width: 4px;
height: 4px;
border-top: 2px solid #000;
border-right: 2px solid #000;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

HTML

<div id="sample01">
<a href="#" class="arrow sample1-1">矢印アイコン横向き</a>
</div>

上向き 矢印アイコン

CSS

#sample02 a{
position: relative;
display: inline-block;
padding: 0 0 0 16px;
color: #000;
vertical-align: middle;
text-decoration: none;
font-size: 15px;
}
#sample02 a::before,
#sample02 a::after{
position: absolute;
top: 3px;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}
#sample02 a::before{
left: 3px;
width: 4px;
height: 4px;
border-top: 2px solid #000;
border-right: 2px solid #000;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

HTML

<div id="sample02">
<a href="#" class="arrow sample1-1">矢印アイコン横向き</a>
</div>

下向き 矢印アイコン

CSS

#sample03 a{
position: relative;
display: inline-block;
padding: 0 0 0 16px;
color: #000;
vertical-align: middle;
text-decoration: none;
font-size: 15px;
}
#sample03 a::before,
#sample03 a::after{
position: absolute;
top: -2px;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}
#sample03 a::before{
left: 3px;
width: 4px;
height: 4px;
border-top: 2px solid #000;
border-right: 2px solid #000;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}

HTML

<div id="sample03">
<a href="#" class="arrow sample1-1">矢印アイコン横向き</a>
</div>