3

div有没有办法在下面的示例中创建一个切口CSS3？

在此处输入图像描述

我想要做的是在 2 之间创建一个切口divs作为图像。div被切掉的实际是div底部的，它有 a background-color， adrop shadow和inset shadowa border style。

然后我想做的是CSS3在div.

4

2 回答 2

6

编辑 - 新解决方案

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

在https://stackoverflow.com/a/18853833/1654265上阅读更多信息

旧解决方案

你可以在同质的背景下做到这一点，而不是像你这样的艺术背景。有些事情是 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
}
于 2013-02-07T09:34:45.543 回答
0

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

演示

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);}
于 2012-10-02T20:02:38.443 回答