<div><i class="cp_arrow_left"></i> Arrow:left</div>
<div><i class="cp_arrow_right"></i> Arrow:right</div>
<div><i class="cp_arrow_up"></i> Arrow:up</div>
<div><i class="cp_arrow_down"></i> Arrow:down</div>
<div><i class="cp_arrow_left_up"></i> Arrow:leftup</div>
<div><i class="cp_arrow_left_down"></i> Arrow:leftdown</div>
<div><i class="cp_arrow_right_up"></i> Arrow:rightup</div>
<div><i class="cp_arrow_right_down"></i> Arrow:rightdown</div>
[class*='cp_arrow'] {/*矢印の背景設定*/
position: relative;
vertical-align: middle;
display: inline-block;
width: 1.6em;
height: 1.6em;
border-radius: 100%;
background: #bf92b8;
}
[class*='cp_arrow']::before{/*矢印の設定*/
position: absolute;
content: '';
margin: 0.3em;
width: 1em;
height: 1em;
background: #ffffff;
clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 70% 50%, 70% 100%, 30% 100%, 30% 50%);
}
/*それぞれの角度*/
.cp_arrow_left::before {
transform: rotate(-90deg);
}
.cp_arrow_right::before {
transform: rotate(90deg);
}
.cp_arrow_up::before {
transform: rotate(0deg);
}
.cp_arrow_down::before {
transform: rotate(180deg);
}
.cp_arrow_left_up::before {
transform: rotate(-45deg);
}
.cp_arrow_left_down::before {
transform: rotate(-135deg);
}
.cp_arrow_right_up::before {
transform: rotate(45deg);
}
.cp_arrow_right_down::before {
transform: rotate(135deg);
}