HTML – 如何创建用css剪掉一块的圆圈

发布时间：2020-12-14 18:43:34 所属栏目：资源来源：网络整理

导读：我想创建一个带有CSS的圆圈,切掉一块(比如披萨：D),但我不知道.请指导我如何创建一个像披萨一样的圆圈. 这是我的代码： HTML： div class="state"/div CSS： .state {position: absolute;height: 44px;width: 44px;right: 5px;top: 0;border: 3px solid tran

我想创建一个带有CSS的圆圈,切掉一块(比如披萨：D),但我不知道.请指导我如何创建一个像披萨一样的圆圈.

这是我的代码：
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);
}

您可以通过更改旋转(度)值来更改间隙的大小和方向.

演示：http://jsfiddle.net/mmetsalu/JmruQ/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!