Html 环绕图像效果的标签

我有一个问题，最好用图片来说明。我已经有绿松石块了，但是我想要红色圆圈内的这个较暗的区域。如果可能的话，我更喜欢只使用CSS的解决方案

到目前为止，我的代码是：

使用：after伪选择器将底部曲线边界定位在跨度图元下

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

---

解决方案：见下文。

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