односторонний перекос с CSS
Я хочу создать односторонний перекос, но не смог. вот что я пробовал до сих пор:
.bg-style1 {
background: #ccc;
position: relative;
display: block;
z-index: 2;
}
.bg-style1:after {
content: " ";
position: absolute;
display: block;
width: 30%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: #333333;
-ms-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
transform: skew(-30deg, 0deg);
}
<section class="page">
<div class="bg-style1">
.....content goes here
</div>
</section>
Но это не работает. смотреть:
чего я хочу достичь: