HTML CSS examples for CSS Widget:Shape
CSS 3 Shape: "Inverse Circle" or "Cut Out Circle"
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!-- ww w . ja v a 2 s.co m--> padding:11px; } .inversePair { border:2px solid Chartreuse; background:grey; display:inline-block; position:relative; height:100px; text-align:center; line-height:100px; vertical-align:middle; } #a { width:100px; border-radius:51px; z-index:2; } #a:before { content:' '; left:-7px; top:-7px; position:absolute; z-index:-2; width:113px; height:113px; border-radius:57px; background-color:yellow; } #b { width:201px; z-index:0; padding-left:51px; margin-left:-56px; overflow:hidden; } #b:before { content:' '; left:-59px; top:-8px; position:absolute; z-index:2; width:115px; height:115px; border-radius:58px; background-color:blue; } </style> </head> <body> <div id="a" class="inversePair"> Lor </div> <div id="b" class="inversePair"> Lor </div> </body> </html>