我想用 CSS 创建一个圆,切掉一 block (比如披萨 :D),但我不知道。请指导我如何创建一个圆圈,就像一 block 切掉的披萨。
这是我的代码: HTML:
<div class="state"></div>
CSS:
.state {
position: absolute;
height: 44px;
width: 44px;
right: 5px;
top: 0;
border: 3px solid transparent;
border-radius: 25px;
z-index: 1;
border-color: #82ba00
}
我想创建这个图像:
最佳答案
使用 RJo 提供的链接和我想出的其中一个答案中的演示:
<div class="arc-wrapper">
<div class="arc arc_start"></div>
<div class="arc arc_end"></div>
</div>
.arc-wrapper {
position:relative;
margin:20px;
}
.arc {
position:absolute;
top:0;
left:0;
width: 100px;
height: 100px;
border-radius:100%;
border:1px solid;
border: 10px solid;
border-color: #82ba00;
}
.arc_start {
border-color:#82ba00 transparent;
-webkit-transform: rotate(-65deg);
-moz-transform: rotate(-65deg);
-ms-transform: rotate(-65deg);
-o-transform: rotate(-65deg);
transform: rotate(-65deg);
}
.arc_end {
border-color: transparent #82ba00 #82ba00 #82ba00;
-webkit-transform: rotate(-110deg);
-moz-transform: rotate(-110deg);
-ms-transform: rotate(-110deg);
-o-transform: rotate(-110deg);
transform: rotate(-110deg);
}
您可以通过更改 rotate(deg)
值来更改间隙的大小和方向。
关于html - 如何创建用CSS切掉一 block 的圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18607691/