需要像示例中那樣創建div形狀

Question

你好，stackoverflow的人，我需要幫助。你們知道如何編輯div的形狀嗎？我需要創建類似div 1和削減div 2部分：

它甚至有可能嗎？ Maby你們可以幫我做這樣的事情嗎？因爲我不知道！

Answer 1

是的，這是可能的。 歪斜頂部5度，並給它一個邊框底部。傾斜頂部塊-5度的內容，以確保它再次直線。

HTML：

<div class="wrapper"> 
    <div class="top"> 
     <aside class="skew-outer"> 
      <div class="skew-inner"> 
       Top content 
      </div> 
     </aside> 
    </div> 
    <div class="bottom"> 
     bottom content 
    </div> 
</div> 

CSS：

.wrapper { 
    border: solid red 1px; 
} 
.bottom { 
    padding: 20px; 
} 
.skew-outer { 
    -webkit-transform: skewY(5deg); 
    -moz-transform: skewY(5deg); 
    -ms-transform: skewY(5deg); 
    -o-transform: skewY(5deg); 
    transform: skewY(5deg); 
    border-bottom: solid red 1px; 
    padding: 30px; 
} 

.skew-inner { 
    -webkit-transform: skewY(-5deg); 
    -moz-transform: skewY(-5deg); 
    -ms-transform: skewY(-5deg); 
    -o-transform: skewY(-5deg); 
    transform: skewY(-5deg); 
} 

Fiddle