包裹图像效果的标签

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/

使用：after伪选择器将底部弯曲边框定位在span元素下。

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:'';
  }