Question

有没有办法在div中使用CSS3创建剪裁，如下例所示？

enter image description here

我要做的是在2 divs之间创建一个剪切作为图像。正在裁剪的实际div是底部的div，它有background-color，drop shadow，inset shadow和{{1} }。

我想要做的是在border style的剪影内放一个CSS3按钮。

Answer 1

编辑 - 新解决方案

使用radial-gradient

，可以在剪切div中实现新的质量级别： Running Demo

详细了解https://stackoverflow.com/a/18853833/1654265

OLD解决方案

你可以用同质背景来做，而不是像你这样的艺术背景。有些东西是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
}

Answer 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);}

div的CSS3弯曲镂空？

2 个答案: