您可能已经猜到,这张图片是邮件信封形状的一部分,如果可能的话,我想用 CSS3 创建它。我已经制作了其他部分,但是这个很棘手。该形状需要在两侧和圆 Angular 处进行三 Angular 形切割(大概是 border-radius-bottom-left/border-radius-bottom-right)。它还必须具有转换小阴影的能力。
这是我到目前为止所做的 -
#envelope {
background: #fff;
}
.closed {
width: 860px;
height: 0;
border-top: 80px solid fff;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
-moz-box-shadow: 0 1px 5px #ccc;
-webkit-box-shadow: 0 1px 5px #ccc;
box-shadow: 0 1px 5px #ccc;
}
jsFiddle - http://jsfiddle.net/hsYUy/
最佳答案
这是我的尝试,只有一个 div
div {
margin:20px;
width:500px;
height:60px;
border-bottom-left-radius: 90px 200px;
border-bottom-right-radius: 90px 200px;
box-shadow: 0 5px 3px -5px #888,
5px 0 3px -5px #888,
-5px 0 3px -5px #888;
}
<div></div>
关于CSS3 信封形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8082982/