CSS3弯曲切割从div？ | CSS3弯曲切割从div

本文介绍了CSS3弯曲切割从div？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有没有办法在 div 中使用 CSS3 创建剪切块， p>

我想要做的是在2 divs 之间创建一个剪切图像。正在切出的实际 div 是底部的 div ，它有一个 background-color ，阴影，插入阴影和 border style 。

我想做的是在 CSS3 按钮>

EDIT - 新解决方案

$ c
$ b

与 radial-gradient ，可以在剪切div中实现新的质量水平：

详情请参阅

旧解决方案

您可以使用均匀背景，不是一个像你这样的艺术家。

但是，你可以使用边框，负边距和z-index做窍门;

演示：

HTML

 < body& 
< div class =container> 
< div class =rounded> bla bla bla< / div> 
< div class =digged> < br />< br />或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 
}

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

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.

解决方案

EDIT - NEW Solution

with radial-gradient, it is possible to achieve new levels of quality in cutout divs:

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
}

这篇关于CSS3弯曲切割从div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！