環繞圖像效果的標籤

Question

我有一個最好用圖像說明的問題。我已經有了綠松石塊，但是我想要這個紅色圓圈內的黑暗區域。如果可能的話，我更喜歡純CSS的解決方案。

到目前爲止我的代碼是這樣的：http://jsfiddle.net/3D2g7/

div { 
    width: 200px; 
    height: 200px; 
    background-color: #000; 
} 

.image-container { 
    position: relative; 
} 

.image-container span { 
    position: absolute; 
    background-color: #00b9e5; 
    padding: 7px 17px; 
    top: 7px; 
    left: -9px; 
    border-top-left-radius: 7px; 
    color: #fff; 
    text-transform: uppercase; 
} 

Answer 1

http://jsfiddle.net/HeT72/2/

使用：僞選擇後定位跨度元素下的底部彎曲邊界。

div { 
    width: 200px; 
    height: 200px; 
    background-color: #000; 
} 

.image-container span { 
    color: #fff; 
    text-transform: uppercase; 
    padding: 7px 17px; 
    display: inline-block; 
    background-color: #00b9e5; 
    position: relative; 
    left: -7px; 
    border-top-left-radius: 7px; 
} 
.image-container span:after { 
    position: absolute; 
    left:0; 
    z-index:-1; 
    background-color: #095F72; 
    padding: 7px 17px; 
    border-bottom-left-radius: 7px; 
    display: block; 
    content:''; 
    }