How to create a circle that cut one piece using css

Question

I want to create one CSS circle that cuts off one part (like pizza: D), but I don't know about that. please call me how to create one circle, like pizza cut in one piece.

this is my code: 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 } 

I want to create this image:

Answer 1

Using the provided RJo link and a demo in one of the answers, I came up with the following:

 <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); } 

You can change the size and direction of the gap by changing the values ​​of rotate(deg) .

Demo: http://jsfiddle.net/mmetsalu/JmruQ/

Answer 2

Here is the solution.

Working script

Inspiration from the shape of a magnifying glass LINK

EDIT: This is also a custom arc. Thus, you can increase or decrease the size of the circle only by making one change to this line in 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> 

EDIT 2: Here is the solution fiddle on canvas. Personally, I believe that you should use this method. Fiddle

Code borrowed from Tharindulucky

Answer 3

See this script: 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); } 

Answer 4

You can easily do this using an HTML5 canvas element.

First write the code for the cava. (Just like a div.)

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

And then write a script for it

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

It will produce what you want. Enjoy!

For a more detailed link http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/