div的CSS3弯曲切口？答案

【问题标题】：CSS3 curved cutout from div?div的CSS3弯曲切口？
【发布时间】：2013-09-17 23:28:58
【问题描述】：

有没有办法在div 和CSS3 中创建一个切口，如下例所示？

我要做的是在 2 divs 之间创建一个切口作为图像。实际删除的div 是底部的div，它有一个background-color、一个drop shadow、inset shadow 和一个border style。

然后我想做的是在div 的切口内放置一个CSS3 按钮。

【问题讨论】：

只用css可以吗？？？我对此表示怀疑。
您是否考虑过为此使用 SVG 或 Canvas - CSS 能够提供一些好东西，但即使您可以在 CSS 中实现这一点，它也会将其发挥到极致，您将结果可能会导致严重的浏览器兼容性问题。在 SVG 或 Canvas 中制作图形会容易得多，并且为您提供更好的跨浏览器兼容性（旧 IE 甚至有一些技巧可以让它支持 SVG 和 Canvas）。

标签： css

【解决方案1】：

编辑 - 新解决方案

使用radial-gradient，可以在抠图div中达到新的质量水平：Running Demo

旧解决方案

你可以用同质的背景来做这件事，而不是像你这样的艺术背景。有些事情是 CSS 永远做不到的，比如变成 Photoshop。

但是，您可以使用边框、负边距和 z-index 来解决问题；

演示：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
}

【讨论】：

谢谢 :) P.S：你的个人资料中的 Ascii Art 不错，但你需要在你的 java hello 打印中添加一个 'n' ^^
谢谢！当然，它是println。解决它。 :-)

【解决方案2】：

您可能需要简化您的设计，但使用渐变和伪元素可能会产生类似的效果。

Demo

body{background: salmon;}
.main {background:gray; width:300px; height:200px; position: relative; margin-top:20px;}
.main:after, .main:before{content:''; width: 50px; height: 20px; background: inherit; position: absolute; }
.main:after{ top:-20px; left:0;}
.main:before{ top:-20px; right:0;}

.phone{width:175px; height:40px; background: gray; margin-left:62.5px; border-radius: 50px; text-align: center; line-height: 40px; position: relative;}

.phone:after,.phone:before{content:''; width:20px; height:20px; background:red; position: absolute;}

.phone:before{bottom:-20px; left:-12px; background: -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 20px, gray 15px);}
.phone:after{bottom:-20px; left:168px; background: -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 20px, gray 15px);}

【讨论】：