Tilt box CSS

by Kaiyuan Xie

HTML

<div class="tilt-box">
    <div class="post">
        <p>V2EX is a community of start-ups, designers, developers and creative people. </p>

        <p>V2EX 是创意工作者们的社区。这里目前汇聚了超过 80000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。 </p>
    </div>
</div>

CSS

.tilt-box {
    position: relative;
    width: 100%;
    margin: 2em 0;
    padding: 60px 0;
    background: #bcd8ff url(http://static.v2ex.com/grids/air.png);
    color:#000;
    overflow: hidden;
}
.tilt-box::before, .tilt-box::after {
    position: absolute;
    display: block;
    content:"";
    width:200%;
    height:40px;
    left:-50%;
    background-color: #fff;
    -webkit-transform: rotateZ(-1.333deg);
    -moz-transform: rotateZ(-1.333deg);
    -o-transform: rotateZ(-1.333deg);
    transform: rotateZ(-1.333deg);
}
.tilt-box::before {
    top:-20px;
}
.tilt-box::after {
    bottom:-20px;
}
/*------------Tilt box end----------------*/
body {
    margin: 0;
}
.tilt-box {
    text-align: center;
}
.post {
    display: inline-block;
    text-align: left;
    padding: 0 1em;
    max-width:460px;
    min-width:220px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    font-size: 12px;
}