Wie die Größe oder die Form des div ändern. \

Question

Hallo im a newbie Website bei der Gestaltung Ich möchte nur fragen, wie ich dies ohne Verwendung von Bildern erreichen kann? Bitte aktivieren Sie dieses Bild Dank , was im zu erreichen versuchen, ist die Black Box mit dieser Art von Form

Html + css

<div class="box side"> 


</div> 

.box.side { 
background-color: #131313; 
height: 100vh 
} 

Answer 1

Dies sollte Ihnen den Einstieg erleichtern:

Grundsätzlich erstellen Sie ein div Block dann drehen Sie es ein wenig, mit Rand und Transform-Herkunft können Sie es passen das Fenster (Suche online, wenn Sie nicht wissen, wie diese Attribute zu verwenden)

Sie benötigen auch einen Container, der Block ist, Breite 100% a Überlauf ausgeblendet, sonst sehen Sie einen gedrehten Div-Block.

.box.side { 
 
    margin-top: 48vh; 
 
    height: 48vh; 
 
} 
 

 
.container { 
 
    display: block; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.slope { 
 
    margin: 0 -100px; 
 
    transform-origin: right center; 
 
    background: black; 
 
    transform: rotate(-2deg); 
 
}

<div class="container"> 
 
    <div class="box side slope"> 
 
    </div> 
 
</div>