Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

css - CSS3 curved cutout from div?

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...