使用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; 
}