Вот еще один способ сделать это, используя клип-пути вместо того, чтобы возиться с границами.
Демо - http://jsfiddle.net/r8rd0yde/4/
.arrow {
position: relative;
padding: 20px;
width: 100px;
height: 100px;
}
.circle {
position: absolute;
box-sizing: border-box;
height: 100px;
width: 100px;
border: 15px solid #000;
border-radius: 50%;
-webkit-clip-path: inset(0 50% 0 0);
clip-path: inset(0 50% 0 0);
}
.triangle {
position: absolute;
width: 35px;
height: 30px;
background: #000;
margin-top: -6px;
margin-left: 38px;
-webkit-clip-path: polygon(50% 0, 0% 100%, 100% 100%);
clip-path: polygon(50% 0, 0% 100%, 100% 100%);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
/* JUST FOR DEMO */
.arrow:hover {
-webkit-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
transition: all 1.2s;
}