CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

html, body {

background-color: #e3e3e3;

font-family: 'Open Sans', sans-serif;

font-weight: 400; }

.bloc-deform {

display: block;

position: absolute;

top: 50%;

-webkit-transform: translate(-50%, -50%);

-moz-transform: translate(-50%, -50%);

-o-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

left: 50%;

width: 200px;

height: auto;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

padding: 30px 25px;

z-index: 2; }

.bloc-deform.bloc-1 {

left: 20%; }

.bloc-deform.bloc-1 .fond-bloc-deform {

-webkit-transform: skew(-12deg, 5deg) rotate(-2deg);

-moz-transform: skew(-12deg, 5deg) rotate(-2deg);

-o-transform: skew(-12deg, 5deg) rotate(-2deg);

-ms-transform: skew(-12deg, 5deg) rotate(-2deg);

transform: skew(-12deg, 5deg) rotate(-2deg); }

.bloc-deform.bloc-1 .categ-bloc {

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

-moz-transform: rotate(-14deg);

-o-transform: rotate(-14deg);

-ms-transform: rotate(-14deg);

transform: rotate(-14deg);

top: -25px;

left: -10px; }

.bloc-deform.bloc-1 .categ-bloc .fond-categ-bloc {

background-color: #8db3c6;

-webkit-transform: skew(-12deg, 0deg) rotate(0deg);

-moz-transform: skew(-12deg, 0deg) rotate(0deg);

-o-transform: skew(-12deg, 0deg) rotate(0deg);

-ms-transform: skew(-12deg, 0deg) rotate(0deg);

transform: skew(-12deg, 0deg) rotate(0deg); }

.bloc-deform.bloc-1 .raccord-categ {

display: block;

width: 25px;

height: 25px;

background-color: #567a8c;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-o-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

position: absolute;

top: 13px;

left: -3px;

z-index: 0; }

.bloc-deform.bloc-2 {

left: 50%; }

.bloc-deform.bloc-2 .fond-bloc-deform {

-webkit-transform: skew(7deg, -8deg) rotate(0deg);

-moz-transform: skew(7deg, -8deg) rotate(0deg);

-o-transform: skew(7deg, -8deg) rotate(0deg);

-ms-transform: skew(7deg, -8deg) rotate(0deg);

transform: skew(7deg, -8deg) rotate(0deg); }

.bloc-deform.bloc-2 .categ-bloc {

top: -25px;

left: 10px;

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

-moz-transform: rotate(-4deg);

-o-transform: rotate(-4deg);

-ms-transform: rotate(-4deg);

transform: rotate(-4deg); }

.bloc-deform.bloc-2 .categ-bloc .fond-categ-bloc {

background-color: #b8025a;

-webkit-transform: skew(4deg, 0deg) rotate(0deg);

-moz-transform: skew(4deg, 0deg) rotate(0deg);

-o-transform: skew(4deg, 0deg) rotate(0deg);

-ms-transform: skew(4deg, 0deg) rotate(0deg);

transform: skew(4deg, 0deg) rotate(0deg); }

.bloc-deform.bloc-3 {

left: 80%; }

.bloc-deform.bloc-3 .fond-bloc-deform {

-webkit-transform: skew(-4deg, -4deg) rotate(4deg);

-moz-transform: skew(-4deg, -4deg) rotate(4deg);

-o-transform: skew(-4deg, -4deg) rotate(4deg);

-ms-transform: skew(-4deg, -4deg) rotate(4deg);

transform: skew(-4deg, -4deg) rotate(4deg); }

.bloc-deform.bloc-3 .categ-bloc {

top: -25px;

left: -10px;

-webkit-transform: rotate(2deg);

-moz-transform: rotate(2deg);

-o-transform: rotate(2deg);

-ms-transform: rotate(2deg);

transform: rotate(2deg); }

.bloc-deform.bloc-3 .categ-bloc .fond-categ-bloc {

background-color: #0f589e; }

.bloc-deform.bloc-3 .raccord-categ {

display: block;

width: 25px;

height: 25px;

background-color: #0b4277;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-o-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

position: absolute;

top: 4px;

left: -3px;

z-index: 0; }

.bloc-deform .fond-bloc-deform {

z-index: 1;

-webkit-box-shadow: 3px 4px 21px rgba(0, 0, 0, .03);

-moz-box-shadow: 3px 4px 21px rgba(0, 0, 0, .03);

box-shadow: 3px 4px 21px rgba(0, 0, 0, .03);

display: block;

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

background-color: #fff;

-webkit-border-radius: 4px;

-webkit-background-clip: padding-box;

-moz-border-radius: 4px;

-moz-background-clip: padding;

border-radius: 4px;

background-clip: padding-box; }

.bloc-deform .txt-bloc-deform {

z-index: 2;

position: relative;

color: #373737;

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

-moz-transform: rotate(-2deg);

-o-transform: rotate(-2deg);

-ms-transform: rotate(-2deg);

transform: rotate(-2deg); }

.bloc-deform .categ-bloc {

position: absolute;

display: block;

padding: 10px 20px;

z-index: 3; }

.bloc-deform .categ-bloc .fond-categ-bloc {

display: block;

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

-webkit-border-radius: 3px;

-webkit-background-clip: padding-box;

-moz-border-radius: 3px;

-moz-background-clip: padding;

border-radius: 3px;

background-clip: padding-box; }

.bloc-deform .categ-bloc .txt-categ-bloc {

position: relative;

color: #fff;

font-size: 1.1em;

font-weight: 700; }