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

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

这是我的代码：
HTML：

<div ></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 >  <div ></div>      <div ></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/

总结

以上是内存溢出为你收集整理的HTML – 如何创建用css剪掉一块的圆圈全部内容，希望文章能够帮你解决HTML – 如何创建用css剪掉一块的圆圈所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。