jak utworzyć krąg, który odciął jedną część z css

Question

Chcę utworzyć jedno kółko z CSS, który odciął jeden kawałek (jak pizza: D), ale nie wiem o tym. proszę, poprowadź mnie, jak stworzyć jeden krąg jak pizzę, który odciął jedną sztukę.

to mój kod: 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 
} 

chcę utworzyć ten obraz:

Answer 1

Korzystanie link RJo dostarczone i prezentację w jednym z odpowiedziami wymyśliłem to:

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

Można zmienić rozmiar i kierunek luka zmieniając wartości rotate(deg).

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

Answer 2

Oto rozwiązanie.

Working Fiddle

Inspiracje ze szkła powiększającego kształt z tego LINK

EDIT: Jest to regulacja łuku zbyt. Dzięki czemu można zwiększyć lub zmniejszyć rozmiar okręgu tylko poprzez jedną zmianę do tej linii w 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: Oto skrzypce rozwiązania opartego na płótnie. Osobiście uważam, że powinieneś używać tej metody. FIDDLE

Kod zapożyczone z Tharindulucky

Answer 3

Zobacz ten skrzypce: 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

Możesz to łatwo zrobić za pomocą elementu Canvas HTML5.

Najpierw wpisz kod cavas. (Podobnie jak div.)

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

A potem napisać scenariusz to

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

będzie produkować to, co chcesz. Baw się dobrze!

Dla bardziej zaawansowanych odniesienia http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/