unbelievable div
yo
by Nikita Shikalov
HTML
<div class="block1">
<div class="block2">
<div class="content">
День студента в клубе Африка
</div>
<ins class="right"></ins>
</div>
</div>
CSS
* {
margin: 0px;
padding: 0px;
}
@font-face {
font-family: 'TeX Gyre Adventor';
src: url('/ig/texgyreadventor-regular-webfont.eot');
src: url('/ig/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/ig/texgyreadventor-regular-webfont.woff') format('woff'),
url('/ig/texgyreadventor-regular-webfont.ttf') format('truetype'),
url('/ig/texgyreadventor-regular-webfont.svg#TeXGyreAdventorRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
color: #fff;
font-family: 'TeX Gyre Adventor';
}
.block1, .block2 {
width: 282px;
}
.block1 {
background: #9b0e44;
padding-right: 3px;
padding-bottom: 8px;
-webkit-transform: skewY(-3deg);
-ms-transform: skewY(-3deg);
-o-transform: skewY(-3deg);
transform: skewY(-3deg);
/* temp */
margin-top: 50px;
margin-left: 100px;
height: 35px;
}
.block2 {
background: #c61357;
-webkit-transform: skewY(0deg);
-ms-transform: skewY(0deg);
-o-transform: skewY(0deg);
transform: skewY(0deg);
position: relative;
top: -2px;
}
.content:before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 9px 46px 0;
border-color: transparent #c61357 transparent transparent;
line-height: 0px;
_border-color: #000000 #c61357 #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
position: absolute;
transform: skewY(-3deg);
top: 10px;
left: -9px;
}
.content:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 39px 29px 0 0;
border-color: #c61357 transparent transparent transparent;
line-height: 0px;
_border-color: #c61357 #000000 #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
position: absolute;
transform: skewY(-5deg);
top: -11px;
left: 282px;
}
.right:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 44px...