制作墓形。我怎么做到的？

Question

我想将文字club members放在以下形状中。

我一直试图做的只是给left和right边距，并以某种方式形成上述形状。

但我不知道怎样才能得到左右线的墓形。

Answer 1

这里有一些代码可以产生你想要的东西。随意摆脱它。

CSS

.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;
}

HTML

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

span本身就是矩形。 ::before伪元素是内圈。 ::after伪元素是外圈。

请参阅jsFiddle

Answer 2

.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>