<div>これ、CSSだけでできてます</div>
<div class="icon-inner">
<div class="arrow-down icon"></div>
</div>
<div class="icon-inner">
<div class="arrow-up icon"></div>
</div>
<div class="icon-inner">
<div class="arrow-right icon"></div>
</div>
<div class="icon-inner">
<div class="arrow-left icon"></div>
</div>
.icon-inner{
width:30px;
height:30px;
display:inline-block;
}
.arrow-down.icon {
color: #000;
position: absolute;
margin-left: 10px;
margin-top: 2px;
width: 1px;
height: 16px;
background-color: currentColor;
}
.arrow-down.icon:before {
content: '';
position: absolute;
left: -5px;
top: 3px;
width: 10px;
height: 10px;
border-top: solid 1px currentColor;
border-right: solid 1px currentColor;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.arrow-up.icon {
color: #000;
position: absolute;
margin-left: 10px;
margin-top: 3px;
width: 1px;
height: 16px;
background-color: currentColor;
}
.arrow-up.icon:before {
content: '';
position: absolute;
left: -5px;
top: 1px;
width: 10px;
height: 10px;
border-top: solid 1px currentColor;
border-right: solid 1px currentColor;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.arrow-left.icon {
color: #000;
position: absolute;
margin-left: 3px;
margin-top: 10px;
width: 16px;
height: 1px;
background-color: currentColor;
}
.arrow-left.icon:before {
content: '';
position: absolute;
left: 1px;
top: -5px;
width: 10px;
height: 10px;
border-top: solid 1px currentColor;
border-right: solid 1px currentColor;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.arrow-right.icon {
color: #000;
position: absolute;
margin-left: 2px;
margin-top: 10px;
width: 16px;
height: 1px;
background-color: currentColor;
}
.arrow-right.icon:before {
content: '';
position: absolute;
right: 1px;
top: -5px;
width: 10px;
height: 10px;
border-top: solid 1px currentColor;
border-right: solid 1px currentColor;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.