EDIT - NEW Solution
with radial-gradient, it is possible to achieve new levels of quality in cutout divs: Running Demo
Read more on https://stackoverflow.com/a/18853833/1654265
OLD Solution
You can do it with an homogeneus background, not with an artistic one like your. There are things that CSS will never do, for example becoming Photoshop.
However, you can do the trick using borders, negative margin and z-index;
Demo: http://jsfiddle.net/cB8Qq/
HTML
<body>
<div class="container">
<div class="rounded">bla bla bla</div>
<div class="digged"> <br/><br/>or yada yada yada </div>
</div>
</body>
CSS
.container{
text-align: center;
background: #ddd;
}
.rounded{
margin: 0 auto;
border-radius: 50px;
width: 200px;
height: 30px;
background: silver;
padding: 10px;
border: 10px solid #ddd;
z-index: 1;
position: relative;
}
.digged{
margin: 0 auto;
background: silver;
width: 400px;
height: 100px;
margin-top: -30px
}
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
