有没有办法用
CSS3在div中创建一个剪切片,如下例所示？
我想要做的是在2个div之间创建一个剪切作为图像.正在剪切的实际div是底部的div,它有背景颜色,阴影,插入阴影和边框样式.
我想做的是在div的剪切区域内放置一个CSS3按钮.
解决方法
编辑 – 新解决方案
通过径向梯度,可以在切割div中实现新的质量水平：Running Demo
阅读更多https://stackoverflow.com/a/18853833/1654265
旧解决方案
你可以用同质背景来做,而不是像你这样的艺术背景.有些东西是CSS永远不会做的,例如成为Photoshop.
但是,你可以使用边框,负边距和z-index来做到这一点;
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
}
