cách tạo vòng tròn cắt một mảnh bằng css

Question

Tôi muốn tạo một vòng tròn có CSS ​​cắt một phần (như pizza: D) nhưng tôi không biết về nó. xin vui lòng hướng dẫn tôi cách tạo ra một vòng tròn như bánh pizza mà một miếng cắt ra.

đây là mã của tôi: 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 
} 

Tôi muốn tạo ra hình ảnh này:

Answer 1

Sử dụng liên kết RJo cung cấp và giới thiệu tại một trong những câu trả lời tôi đã đưa ra với điều này:

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

Bạn có thể thay đổi kích thước và hướng của khoảng cách bằng cách thay đổi giá trị rotate(deg).

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

Answer 2

Đây là giải pháp.

Working Fiddle

Nguồn cảm hứng từ hình dạng lúp kính từ LINK

EDIT này: Đây là một vòng cung có thể điều chỉnh quá. Vì vậy, bạn có thể tăng hoặc giảm kích thước của vòng tròn chỉ bằng cách làm cho một sự thay đổi để dòng này trong 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: Đây là một giải pháp dựa trên Canvas. Cá nhân tôi cảm thấy bạn nên sử dụng phương pháp này. FIDDLE

Mã mượn từ Tharindulucky

Answer 3

Xem fiddle này: 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

Bạn có thể dễ dàng thực hiện việc này bằng cách sử dụng phần tử Canvas HTML5.

Trước tiên hãy viết mã cho cavas. (Giống như một div.)

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

Và sau đó viết kịch bản cho nó

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

Nó sẽ tạo ra những gì bạn muốn. Chúc vui vẻ!

Để tham khảo cao cấp hơn, http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/