CSS3弯曲切割从div？ [英] CSS3 curved cutout from div?
问题描述
有没有办法在 div 中使用 CSS3 创建剪切块， p>
>
我想要做的是在2 divs 之间创建一个剪切图像。正在切出的实际 div 是底部的 div ，它有一个 background-color ，阴影，插入阴影和 border style 。
我想做的是在 EDIT - 新解决方案 与 详情请参阅 http://stackoverflow.com/a/18853833/1654265 旧解决方案 您可以使用均匀背景，不是一个像你这样的艺术家。 但是，你可以使用边框，负边距和z-index做窍门; 演示： http://jsfiddle.net/cB8Qq/ HTML CSS Is there a way to create a cutout in a What I'm trying to do is create a cutout in between 2 What I would like to do then is put a EDIT - NEW Solution with Read more on http://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 CSS
这篇关于CSS3弯曲切割从div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
$ b radial-gradient ，可以在剪切div中实现新的质量水平： 正在运行的演示
< body&
< div class =container>
< div class =rounded> bla bla bla< / div>
< div class =digged> < br />< br />或yada yada yada< / div>
< / div>
< / body>
.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
}
div with CSS3 like in the example below?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. CSS3 button inside the cutout of the div.radial-gradient, it is possible to achieve new levels of quality in cutout divs: Running Demo
<body>
<div class="container">
<div class="rounded">bla bla bla</div>
<div class="digged"> <br/><br/>or yada yada yada </div>
</div>
</body>
.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
}
