drawing navigation arrow shape using css

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'.