編碼定義形狀

Question

我有我的網頁設計的一點，現在我不知道，如何編寫這樣的：

在白色背景的頭和紅色背景上是網頁設計的一個部分。我不知道如何編碼這個形狀。

有人可以幫我這個嗎？

感謝

Answer 1

創建2盒，則該頂部傾斜部分，創建一個正方形並旋轉，以獲得正確的角度，並將其放置在你需要它。你很可能變得棘手，並與:before & :after

Answer 2

用這個佈局棘手的部分是明顯傾斜創建2條裝飾件，但作爲CSS-Tricks demonstrates，您可以使用邊框來實現斜面。因此，使用簡單的div定位在標題上部右邊緣（或任何元素），您可以獲得一個向下兼容IE 7的傾斜 - 帶有HTML5 shiv（自它不使用轉換）：尚未

header { 
 
    background: #c33; 
 
    height: 100px; 
 
    margin-top: 80px; 
 
    position: relative; 
 
} 
 
div.top { 
 
    position: absolute; 
 
    height: 40px; 
 
    width: 50%; 
 
    top: -40px; 
 
    background: inherit; 
 
    left: 0; 
 
} 
 
div.triangle { 
 
    position: absolute; 
 
    top: -40px; 
 
    left: 50%; 
 
    border: transparent 20px solid; 
 
    border-bottom: #c33 20px solid; 
 
    border-left: #c33 20px solid; 
 
    height: 0; 
 
}

<header> 
 
    <div class="top"></div> 
 
    <div class="triangle"></div> 
 
</header>