使用css的圆形div内的细箭头

Question

我正在尝试使用css创建一个细箭头（朝向右方）。

我已经创建了带圆圈的div但是仍然用箭头

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

我创建了小提琴并附加了参考图像

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

任何提示/建议/参考链接都会很棒。提前谢谢。

Answer 1

这是使用伪元素的一个选项，尽管图像或SVG可能更可取。

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) ;

}

Answer 2

添加了一个div并给它一个白色边框检查，如果这符合您的兴趣http://jsfiddle.net/c9eyrat6/6/

#line{
transform:rotate(-10deg);
width:120px;
height:120px;
border:5px solid white;
}