HTML CSS examples for CSS Widget:Shape
Make a color wheel, a circle with four colors
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .chart {<!--from ww w . j a v a 2s. c om--> position: absolute; width:0; height:0; border-radius: 60px; -moz-border-radius: 60px; -webkit-border-radius: 60px; } #chart1 { border-right:60px solid red; border-top:60px solid transparent; border-left:60px solid transparent; border-bottom:60px solid transparent; } #chart2 { border-right:60px solid transparent; border-top:60px solid green; border-left:60px solid transparent; border-bottom:60px solid transparent; } #chart3 { border-right:60px solid transparent; border-top:60px solid transparent; border-left:60px solid blue; border-bottom:60px solid transparent; } #chart4 { border-right:60px solid transparent; border-top:60px solid transparent; border-left:60px solid transparent; border-bottom:60px solid yellow; } </style> </head> <body> <div id="chart1" class="chart"></div> <div id="chart2" class="chart"></div> <div id="chart3" class="chart"></div> <div id="chart4" class="chart"></div> </body> </html>