sesgo unilateral con CSS
Quiero crear un sesgo unilateral, pero no lo hice. Esto es lo que he probado hasta ahora:
.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>
Pero no está funcionando. Mira:
lo que quiero lograr: