how to create Transversely div using css? - html

Question

i want create Transversely div using css.
i want create look like show in following image.
following image

Answer 1

You can use:
transform: skew();
in your CSS.
Working Example:
body {
margin: 0;
}
.intro {
position: relative;
width: 65vw;
height: 100vh;
left: -15vw;
background-color: rgb(47, 47, 47);
transform: skew(-10deg);
}
<div class="intro">
</div>

Answer 2

something like this?
this is a quick copy/paste that i found on a site i made..
https://codepen.io/biroplane/pen/NpLrvE
#sx {
-webkit-clip-path: polygon(0 0, 95% 0, 74% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 84% 100%, 0% 100%);
background-image: url('https://unsplash.it/1920/1080/?random');
//background-image: url('http://loremflickr.com/1920/1080/dog,cat');
background-position: center center;
background-clip: border-box;
background-repeat: no-repeat;
background-size: cover !important;
background-attachment: scroll;
overflow: scroll;
width: 50vw !important;
height: 100vh;
display: flex;
align-items: center;
align-content: center;
flex-direction: column;
transition: all 0.5s cubic-bezier(.34, -0.32, .42, 1.34);
&:hover {
border: 10px solid white;
width: 100vw !important;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
~ #dx {
//width:100vw !important;
}
h1 {
//margin-left: 25vw;
color: white;
#include textlongshadow(#222);
}
img {
//margin-left: 25vw;
#include longshadow();
//-webkit-filter:drop-shadow(10px 10px 10px white) drop-shadow(20px 20px 10px red);
//longdrop(20,#222);
}
}