如何使用CSS3 / HTML5創建切片圓？

Question

請幫助我創建一個切片的圓圈，在其中可以單擊每個切片以發出不同的命令，就像在按鈕中所做的一樣。 切片必須如下所示：

• 2個圓，主外圓，內圓（大小為外圓），

• 主圓上有3條線，它將2個圓分成12個切片。 這3條直線中的直線應為垂直線。

參考圖片：

 .maincircle { height: 404px; width: 404px; } .slice1 { float: left; height: 200px; width: 200px; border: 1px solid #000; background-color: #093; cursor: pointer; border-radius: 190px 0 0 0; -moz-border-radius: 190px 0 0 0; -webkit-border-radius: 190px 0 0 0; } .slice1:hover { background-color: #6C6; } .slice2 { float: left; height: 200px; width: 200px; border: 1px solid #000; background-color: #093; cursor: pointer; -moz-border-radius: 0 190px 0 0; -webkit-border-radius: 0 190px 0 0; } .slice2:hover { background-color: #6C6; } .slice3 { float: left; height: 200px; width: 200px; border: 1px solid #000; background-color: #093; cursor: pointer; -moz-border-radius: 0 0 0 190px; -webkit-border-radius: 0 0 0 190px; } .slice3:hover { background-color: #6C6; } .slice4 { float: left; height: 200px; width: 200px; border: 1px solid #000; background-color: #093; cursor: pointer; -moz-border-radius: 0 0 190px 0; -webkit-border-radius: 0 0 190px 0; } .slice4:hover { background-color: #6C6; } 

 <div class="maincircle"> <div class="slice1"></div> <div class="slice2"></div> <div class="slice3"></div> <div class="slice4"></div> </div> 

Answer 1

這是我采用的方法的簡單示例

演示http://jsfiddle.net/kevinPHPkevin/XN3ZB/314/

我將http://code.highcharts.com/highcharts.js用於此類操作。 這意味着使用餅圖，您可以根據需要設置樣式並使其表現出自己喜歡的方式。 這是非常快速和簡單的。

已編輯

更新為多層

 $(document).ready(function() { Highcharts.setOptions({ colors: ['#2a6705'] }); RenderPieChart('container', [ ['one piece', 15.6], ['one piece', 15.6], ['one piece', 15.6], ['one piece', 15.6], ['one piece', 15.6], ['one piece', 15.6], ]); function RenderPieChart(elementId, dataList) { new Highcharts.Chart({ chart: { renderTo: elementId, plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: 'Use a pie chart for more than just data' }, tooltip: { formatter: function() { return '<b> Add an event here</b>'; } }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorColor: '#000000', formatter: function() { return '<b>Make these clickable</b>'; } } } }, series: [{ type: 'pie', name: 'Browser share', data: dataList }, { type: 'pie', name: 'Browser share', data: dataList, innerSize: '70%' }] }); }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 

Answer 2

我發現這很有趣，所以我繼續在SVG中創建了它：

 path:hover { fill: blue; } 

 <svg height="440px" width="440px"> <path d="M 220 220 L 270 306.60254037844385 A 100 100 0 0 0 320 220 z" fill="green" stroke="white" onclick="alert('inner-0')" /> <path d="M 420 220 A 200 200 0 0 1 320 393.2050807568877 L 270 306.60254037844385 A 100 100 0 0 0 320 220 z" fill="green" stroke="white" onclick="alert('outer-0')" /> <path d="M 220 220 L 170.00000000000003 306.6025403784439 A 100 100 0 0 0 270 306.60254037844385 z" fill="green" stroke="white" onclick="alert('inner-1')" /> <path d="M 320 393.2050807568877 A 200 200 0 0 1 120.00000000000004 393.20508075688775 L 170.00000000000003 306.6025403784439 A 100 100 0 0 0 270 306.60254037844385 z" fill="green" stroke="white" onclick="alert('outer-1')" /> <path d="M 220 220 L 120 220 A 100 100 0 0 0 170.00000000000003 306.6025403784439 z" fill="green" stroke="white" onclick="alert('inner-2')" /> <path d="M 120.00000000000004 393.20508075688775 A 200 200 0 0 1 20 220.00000000000003 L 120 220 A 100 100 0 0 0 170.00000000000003 306.6025403784439 z" fill="green" stroke="white" onclick="alert('outer-2')" /> <path d="M 220 220 L 169.99999999999994 133.39745962155615 A 100 100 0 0 0 120 220 z" fill="green" stroke="white" onclick="alert('inner-3')" /> <path d="M 20 220.00000000000003 A 200 200 0 0 1 119.99999999999991 46.79491924311233 L 169.99999999999994 133.39745962155615 A 100 100 0 0 0 120 220 z" fill="green" stroke="white" onclick="alert('outer-3')" /> <path d="M 220 220 L 269.99999999999994 133.3974596215561 A 100 100 0 0 0 169.99999999999994 133.39745962155615 z" fill="green" stroke="white" onclick="alert('inner-4')" /> <path d="M 119.99999999999991 46.79491924311233 A 200 200 0 0 1 319.9999999999999 46.79491924311219 L 269.99999999999994 133.3974596215561 A 100 100 0 0 0 169.99999999999994 133.39745962155615 z" fill="green" stroke="white" onclick="alert('outer-4')" /> <path d="M 220 220 L 320 219.99999999999997 A 100 100 0 0 0 269.99999999999994 133.3974596215561 z" fill="green" stroke="white" onclick="alert('inner-5')" /> <path d="M 319.9999999999999 46.79491924311219 A 200 200 0 0 1 420 219.99999999999994 L 320 219.99999999999997 A 100 100 0 0 0 269.99999999999994 133.3974596215561 z" fill="green" stroke="white" onclick="alert('outer-5')" /> </svg> 

http://jsfiddle.net/u2h4J/2/

如果有人感興趣，我用以下（丑陋的）代碼生成了此代碼：

 var RADIUS = 200; var PADDING = 20; var SLICES = 6; var svg = ""; for (var i = 0; i < SLICES; i++) { var p1 = { x: Math.cos(Math.PI * 2 / SLICES * i) * RADIUS + RADIUS + PADDING, y: Math.sin(Math.PI * 2 / SLICES * i) * RADIUS + RADIUS + PADDING }; var p2 = { x: Math.cos(Math.PI * 2 / SLICES * (i + 1)) * RADIUS + RADIUS + PADDING, y: Math.sin(Math.PI * 2 / SLICES * (i + 1)) * RADIUS + RADIUS + PADDING }; var p4 = { x: Math.cos(Math.PI * 2 / SLICES * i) * (RADIUS / 2) + RADIUS + PADDING, y: Math.sin(Math.PI * 2 / SLICES * i) * (RADIUS / 2) + RADIUS + PADDING }; var p3 = { x: Math.cos(Math.PI * 2 / SLICES * (i + 1)) * (RADIUS / 2) + RADIUS + PADDING, y: Math.sin(Math.PI * 2 / SLICES * (i + 1)) * (RADIUS / 2) + RADIUS + PADDING }; svg += "<path d='M " + (RADIUS + PADDING) + " " + (RADIUS + PADDING) + " L " + p3.x + " " + p3.y + " A " + (RADIUS / 2) + " " + (RADIUS / 2) + " 0 0 0 " + p4.x + " " + p4.y + " z' fill='green' stroke='white' onclick='alert(\\"inner-" + i + "\\")'/>"; svg += "<path d='M " + p1.x + " " + p1.y + " A " + RADIUS + " " + RADIUS + " 0 0 1 " + p2.x + " " + p2.y + " L " + p3.x + " " + p3.y + " A " + RADIUS / 2 + " " + RADIUS / 2 + " 0 0 0 " + p4.x + " " + p4.y + " z' fill='green' stroke='white' onclick='alert(\\"outer-" + i + "\\")'/>"; } svg = "<svg height='" + (RADIUS * 2 + PADDING * 2) + "px' width='" + (RADIUS * 2 + PADDING * 2) + "px'>" + svg + "</svg>"; $("body").append(svg); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 

http://jsfiddle.net/t3pLn/1/