您可能已经猜到这个图像是邮件信封形状的一部分,如果可能的话我想用CSS3创建 . 我've made the other parts but this one'很棘手 . 形状需要两侧的三角形切口和圆角(可能是边界半径 - 左下角/边缘半径 - 右下角) . 它 also 必须具有施放小阴影的能力 .
这就是我到目前为止所做的 -
#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/
4 回答
我的尝试,我只使用了chrome的阴影和旋转属性,但你可以将它添加到其他浏览器,
http://jsfiddle.net/hsYUy/7/
这是我的尝试,只有一个div
http://jsfiddle.net/Simo990/Z8cPc/4
使用2D偏斜的1元素解决方案对伪元素进行变换 .
DEMO
Result :
HTML :
这里有3个近似值http://jsfiddle.net/JKirchartz/RNChA/仅使用border-radius,应该适用于所有具有正确前缀的浏览器 .
HTML: