有没有办法用
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
- }
