如何创建用css切断一块的圆圈答案

【问题标题】：how to create circle that cut off one piece with css如何创建用css切断一块的圆圈
【发布时间】：2013-09-04 07:19:18
【问题描述】：

我想用 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
}

我想创建这个图像：

【问题讨论】：

这可能会有所帮助：stackoverflow.com/questions/13059190/…
谢谢我的朋友你能告诉我更多吗？
CSS 是这种任务的错误工具。请改用 SVG 或 Canvas。它是为这种事情而设计的。 CSS 不是。（是的，也许可以在 CSS 中完成，但这并不意味着您应该在 CSS 中完成）。

标签： html css

【解决方案1】：

使用 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) 值来更改间隙的大小和方向。

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

【讨论】：

+1：你甚至可以在线条的末端找到正确的角度[当然，这是你所期望的弧线！ ;o) ].
恭喜@martin-metsalu，你更快了！ ;) 但这也是我的解决方案：jsfiddle.net/Stocki/ttAyW
从技术上讲，我是第一个发布解决方案的人，但我承认了。这是一个更好的解决方案。

【解决方案2】：

这是解决方案。

Working Fiddle

来自LINK的放大镜形状的灵感

编辑：这也是一个可调节的弧线。因此，您只需在 CSS 中对这一行进行一次更改，就可以增大或减小圆圈的大小

font-size: 15em;  /* This controls the size. */

CSS

 #pie {
        font-size: 15em;
        /* This controls the size. */
        display: inline-block;
        width: 0.5em;
        height: 0.5em;
        border: 0.05em solid #00cc00;
        position: relative;
        border-radius: 0.35em;
    }
    #pie::before {
        content:"";
        display: inline-block;
        position: absolute;
        right: 0.33em;
        bottom: 0em;
        border-width: 0;
        background: white;
        width: 0.22em;
        height: 0.12em;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
    }

HTML

<div id="pie"><div>

编辑 2： 这是一个基于 Canvas 的解决方案的小提琴。我个人觉得你应该使用这种方法。 FIDDLE

从 Tharindulucky 借来的代码

【讨论】：

【解决方案3】：

看到这个小提琴：http://jsfiddle.net/avrahamcool/vqu5d/

HTML：

<div id="circle"></div>

CSS：

#circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 10px solid green;
    border-bottom-color: transparent;
    transform:rotate(30deg);
}

【讨论】：

【解决方案4】：

您可以使用 HTML5 Canvas 元素轻松完成。

首先编写cavas的代码。（就像一个 div。）

<canvas id="myCanvas" width="200" height="100" style="border: 1px solid black;"></canvas>

然后为它编写脚本

<script>
var d=document.getElementById("myCanvas");
var dtx=d.getContext("2d");
dtx.beginPath();
dtx.arc(95,50,40,0,1.8*Math.PI);
dtx.lineWidth = 5;
dtx.stroke();
</script>

它会产生你想要的东西。玩得开心！

【讨论】：