how to create circle that cut off one piece with css

Question

I want create one circle with CSS that cut off one piece (like pizza :D) but I don't know about it. please guide me how to create one circle like pizza that one piece cut off.

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 create this image :

Answer 1

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

<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 rotate(deg) values.

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

Answer 2

Here is the solution.

Working Fiddle

Inspiration from magnifying glass shape from this LINK

EDIT: This is a adjustable arc too. So you can increase or decrease size of the circle only by making one change to this line in the 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 a fiddle of a Canvas based solution. Personally i feel you should use this method. FIDDLE

Code borrowed from Tharindulucky