CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,700);

body {

background-color: #EA4C89;

font-family: "Playfair Display", serif;

}

body .container {

position: relative;

height: 400px;

width: 550px;

margin: 100px auto 0;

background-color: #336666;

}

body .container:after {

content: "";

position: absolute;

top: 232px;

left: 82px;

width: 900px;

height: 670px;

background-color: rgba(0, 0, 0, 0.3);

-webkit-transform: rotate(55deg);

transform: rotate(55deg);

z-index: -1;

}

body .container .letter {

position: absolute;

top: 0px;

left: 50%;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

width: 490px;

height: 400px;

background-color: #fff;

-webkit-transition: top 0.4s ease-in;

transition: top 0.4s ease-in;

}

body .container .letter img {

display: block;

width: 150px;

margin: 0 auto;

}

body .container .letter h2 {

margin: 0 0 20px;

text-align: center;

text-transform: uppercase;

font-weight: 400;

}

body .container .letter .rec {

display: block;

height: 18px;

margin: 10px 10px;

background-color: #eee;

}

body .container .letter .rec:first-child {

width: 400px;

}

body .container .letter .rec:nth-child(2) {

width: 230px;

}

body .container .letter .rec:last-child {

width: 210px;

}

body .container .open {

top: -60px;

}

body .container .side {

position: absolute;

top: 0;

width: 0;

height: 0;

border-style: solid;

z-index: 10;

}

body .container .side-left {

left: 0;

border-width: 200px 0 200px 275px;

border-color: transparent transparent transparent #C2EBEB;

}

body .container .side-right {

right: 0;

border-width: 200px 275px 200px 0;

border-color: transparent #C2EBEB transparent transparent;

}

body .container .side-bottom {

top: 160px;

border-width: 0 275px 240px 275px;

border-color: transparent transparent #66CCCC transparent;

}