html中css信封怎么表示,CSS3信封形状

我的尝试，我只使用了chrome的阴影和旋转属性，但你可以将它添加到其他浏览器，

body {

background: #f2f2f2;

}

#content {

width: 460px;

margin: 0 auto;

background: #fff;

height: 400px;

/* for demo */

-moz-box-shadow: 0 1px 5px #ccc;

-webkit-box-shadow: 0 1px 5px #ccc;

box-shadow: 0 1px 5px #ccc;

border-bottom-left-radius: 15px;

-moz-border-radius-bottomleft: 15px;

-webkit-border-bottom-left-radius: 15px;

border-bottom-right-radius: 15px;

-moz-border-radius-bottomright: 15px;

-webkit-border-bottom-right-radius: 15px;

z-index: 0;

}

.closed {

z-index: 1;

width: 460px;

overflow: hidden;

margin: 0 auto;

height: 80px;

margin-bottom: -5px;

}

.closed .mid {

/*background: #fff;*/

width: 360px;

margin: 0 auto;

margin-top: -70px;

height: 80px;

background-color: #fff;

-moz-box-shadow: 0 1px 5px #ccc;

-webkit-box-shadow: 0 1px 5px #ccc;

box-shadow: 0 1px 5px #ccc;

-webkit-border-radius: 12px;

}

.left,

.right {

display: none;

}

.closed .right {

display: block;

width: 0;

height: 100px;

border-left: 60px solid #fff;

border-right: 1px solid #ccc;

margin-left: 384px;

-webkit-transform: rotate(39deg);

margin-top: -34px;

box-shadow: 1px -1px 1px #ccc;

}

.closed .left {

display: block;

width: 0;

height: 100px;

border-right: 60px solid #fff;

border-left: 1px solid #ccc;

margin-left: 16px;

-webkit-transform: rotate(-39deg);

margin-top: -100px;

box-shadow: -1px -1px 1px #ccc;

}