Home/ Questions/Q 9268153
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T14:44:13+00:00

Is there a way to create a cutout in a div with CSS3 like

  • 0

Is there a way to create a cutout in a div with CSS3 like in the example below?

enter image description here

What I’m trying to do is create a cutout in between 2 divs as the image. The actual div that is being cut out is the div at the bottom, it has a background-color, a drop shadow, inset shadow and a border style.

What I would like to do then is put a CSS3 button inside the cutout of the div.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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
}
    • 0