A thin arrow within a circle div using css

Question

I am trying to create a thin arrow (direction towards right) using css.

I have created the circled div but stuck with the arrow

<div class="circleBase type2"></div>

I have created the fiddle and also attached the reference image

http://jsfiddle.net/squidraj/c9eyrat6/

Any hint/suggestion/reference link would do great. Thanks in advance.

Answer 1

Here's one option using a pseudo-element although an image or SVG would probably be preferable.

JSfiddle Demo

CSS

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
    overflow: hidden;
    box-sizing: border-box;
}

.type2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
    position: relative;
}

.type2:before {
    content:"";
    position: absolute;
    top:0;
    right:50%;
    width:100%;
    height:100%;
    border:2px solid white;
    transform:rotate(45deg) ;

}