To jest akurat bardzo proste ;)
HTML:
<div id="rectangle">
<div id="circle"></div>
</div>
CSS:
#rectangle {
width: 100px;
height: 100px;
background: red;
}
#circle {
margin-left: 50px;
width: 100px;
height: 100px;
background: white;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
Jak to działa? Jest to bardzo proste. Tutaj wykorzystałem dwa elementy div. Pierwszy jest prostokątem, a nawet kwadratem. Drugi natomiast to koło. Div circle umieściłem w divie rectangle. Aby "rysunek" sprawiał efekt wcięcia, przesunąłem go o 50 px w prawo popatrz na pierwszą linijkę w bloku dla diva circle