html - 环绕图像效果的标签

我有一个最好用图像说明的问题。我已经有绿松石色块，但是我想要这个红色圆圈内较暗的区域。如果可能的话，我更喜欢仅使用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;
}

最佳答案

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

关于html - 环绕图像效果的标签，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23445497/