HTML CSS examples for CSS Widget:Shape
Change shape of div elements to look like a sliced pizza
<html> <head> <title>Lorem ipsum dolo</title> <style> body {<!--from w w w .j av a2 s . c om--> font-family:Tahoma, Geneva, sans-serif; } h2 { text-align:center; } .chart { position:relative; width:501px; height:251px; } .hold { position:absolute; width:201px; height:201px; clip:rect(0px,201px,201px,100px); left:301px; } .Pizza { position:absolute; width:201px; height:201px; clip:rect(0px,100px,201px,0px); border-radius:100px; } </style> </head> <body> <style> style> .PizzaContainer { height:100px; width:100px; float:right; margin:0 0 21px 21px; } #PizzaSliceYellow .Pizza { background-color:Chartreuse; transform:rotate(61deg); } #PizzaSliceBlue { transform:rotate(61deg); } #PizzaSliceBlue .Pizza { background-color:yellow; transform:rotate(61deg); } #PizzaSliceRed { transform:rotate(121deg); } #PizzaSliceRed .Pizza { background-color:blue; transform:rotate(61deg); } #PizzaSliceOlive { transform:rotate(181deg); } #PizzaSliceOlive .Pizza { background-color:pink; transform:rotate(61deg); } #PizzaSliceOrange { transform:rotate(241deg); } #PizzaSliceOrange .Pizza { background-color:OrangeRed; transform:rotate(61deg); } #PizzaSliceLime { transform:rotate(301deg); } #PizzaSliceLime .Pizza { background-color:grey; transform:rotate(61deg); } </style> <div class="PizzaContainer"> <div class="PizzaBackground"></div> <div id="PizzaSliceYellow" class="hold"> <div class="Pizza"></div> </div> <div id="PizzaSliceBlue" class="hold"> <div class="Pizza"></div> </div> <div id="PizzaSliceRed" class="hold"> <div class="Pizza"></div> </div> <div id="PizzaSliceOlive" class="hold"> <div class="Pizza"></div> </div> <div id="PizzaSliceOrange" class="hold"> <div class="Pizza"></div> </div> <div id="PizzaSliceLime" class="hold"> <div class="Pizza"></div> </div> </div> </body> </html>