我想创建一个带有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
}
我想创建此图片:
答案 0 :(得分:12)
使用提供的链接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)
值来更改间隙的大小和方向。
答案 1 :(得分:3)
这是解决方案。
来自此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借来的守则
答案 2 :(得分:1)
看到这个小提琴: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);
}
答案 3 :(得分:1)
您可以使用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>
它会产生你想要的东西。玩得开心!
有关更高级的参考,http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/