如何更改div的大小或形狀\

Question

嗨在設計網站新手我只想問我怎麼能實現這一點，而不使用圖像？請檢查該圖像感謝什麼即時試圖完成的是黑匣子的那種形狀的

HTML + CSS

<div class="box side"> 


</div> 

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

Answer 1

這應該幫助您開始：

基本上，你創建一個div塊然後旋轉它一點點，帶有邊距和變換原點，你可以使它適合窗口（如果你不知道如何使用這些屬性，可以在線搜索）

你還需要一個容器，它是塊，寬度100％a nd隱藏，否則，你會看到一個旋轉的div塊。

.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>