drawing navigation arrow shape using css - html

Question

I'm trying to draw a navigation arrow using css only, I wrote this code
<span class="outer">
<span class="inner"></span>
</span>
with the style
.outer {
width: 40px;
height: 40px;
border: 2px solid #000;
border-radius: 30px;
display: block;
position: relative;
}
.inner {
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #000 transparent transparent;
position: absolute;
right: 35%;
top: 24%;
}
but i want the inner triangle be like this <, not as play button. i shared my code on JSFiddle

Answer 1

You could use a pseudo element to get this sort of shape.
The only drawback being you would need to know the top and left values; they aren't relative to the size of .inner.
.outer {
width: 40px;
height: 40px;
border: 2px solid #000;
border-radius: 30px;
display: block;
position: relative;
}
.inner {
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #000 transparent transparent;
position: absolute;
right: 35%;
top: 24%;
}
.inner:after{
content:'';
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #FFF transparent transparent;
position: absolute;
left: 5px;
top: -10px;
}
<span class="outer">
<span class="inner"></span>
</span>
This simply places the same sized arrow on top of .inner, but nudged over a few pixels. Increase the left style to make the arrow 'thicker'.