如何使用css创建横向div？

Question

我想创建使用CSS的横向div。 我想创建看起来像在下面的图像显示。 following image

Answer 1

您可以使用：

transform: skew(); 

在你的CSS

。

工作实例：

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

这样的事情？ 这是一个快速的复制/粘贴，我的网站上我犯了发现..

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); 
    } 
    }