Html 制作坟墓形状。我怎么做？

我想将文本

俱乐部成员

放入以下形状中

我一直想做的就是给

左

和

右

留边距，然后以某种方式形成上面的形状

---

但我不知道如何才能得到左右线条的坟墓形状。

这里有一些代码，可以生成您想要的形状。你可以自由地在它的基础上发展

CSS HTML

俱乐部会员

span

本身就是矩形。

：：在

之前的伪元素是内圈。

：：在

伪元素之后是外圆

请参见

。半圆形{
位置：绝对位置；
宽度：100px；
高度：100px；
-moz边界半径：50px；
-webkit边界半径：50px；
-o-边界半径：50px；
边界半径：50px；
剪辑：rect（0px，67px，108px，0px）
}
#半圆1.半圆{
背景色：#1b458b；
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
-o变换：旋转（90度）；
变换：旋转（90度）；
}

如何增加坟墓的大小？我希望坟墓的背景色为无。也就是说，我希望它是透明的。通过调整

span

的尺寸，并通过

left

和

top

属性相应地移动伪元素来增加大小。通过调整

边框

属性，可以相应地增加半圆。好的，墓穴白色的背景是什么？我看不到任何背景色属性。我该怎么做才能使它透明？有没有办法，我可以使坟墓的背景透明？

.my-icon {
    position: relative;
    display: inline-block;
    width: 10em;
    height: 6em;
    border: .5em solid blue;
    top: 2em;
    text-align: center;
    padding-top: 1em;
    font-family: sans-serif;
    text-transform: uppercase;
    z-index: 5;
    background-color: #fff;
}
.my-icon::before {
    position: absolute;
    border: 2em solid #fff;
    border-bottom: none;
    border-top-right-radius: 2em;
    border-top-left-radius: 2em;
    left: 3em;
    top: -2em;
    content:'';
    z-index: 3;
}
.my-icon::after {
    position: absolute;
    border: 2.5em solid blue;
    border-bottom: none;
    border-top-right-radius: 2.5em;
    border-top-left-radius: 2.5em;
    left: 2.5em;
    top: -2.5em;
    content:'';
    z-index: 1;
}

<span class='my-icon'>Club Members</span>

.halfCircle {
position: absolute;
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
clip: rect(0px, 67px, 108px, 0px)
}
#halfCircleSlice1 .halfCircle {
background-color: #1b458b;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
}
<div id="halfCircleSlice1" class="hold">
    <div class="halfCircle"></div>
</div>