我想将文字club members
放在以下形状中。
我一直试图做的只是给left
和right
边距,并以某种方式形成上述形状。
但我不知道怎样才能得到左右线的墓形。
答案 0 :(得分:3)
这里有一些代码可以产生你想要的东西。随意摆脱它。
.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>
span
本身就是矩形。 ::before
伪元素是内圈。 ::after
伪元素是外圈。
请参阅jsFiddle
答案 1 :(得分:-1)
.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>