cssの三角形の四角形

Question

暗い灰色の部分が下に座る要素であることを考えると、どのように画像の黄金の形をCSSだけで描くことができますか？

この今のところ私のコードです：あなたが最後に変更することで、カットの深さを調整することができます

.Header--wrapper { 
    position: relative; 
    background-color: #42424C; 
} 

.Header--start-small { 
    width: 25%; 
    position: absolute; 
    background-color: #BCB097; 
    color: white; 
    margin-top: -10px; 
    margin-left: 15px; 
    padding-bottom: 57px; 
    display: inline-block; 
} 

<div className="Header--wrapper"> 
    <div className="Header--start-small"></div> 
</div> 

Answer 1

#container { 
 
    height: 80px; 
 
    width: 300px; 
 
    background: #ebebeb; 
 
} 
 

 
#container:before { 
 
    content: " "; 
 
    display: inline-block; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 40px 0 40px 20px; 
 
    border-color: #ebebeb #ebebeb #ebebeb white; 
 
}

<div id="container"></div>

注意border-widthの相対値他の値に

Answer 2

私は更新のCSSとHTMLを持ってください、ブローコードを参照してください。

.Header--wrapper { 
 
    position: relative; 
 
    background-color: #BCB097; 
 
    height: 40px; 
 
    overflow: hidden; 
 
} 
 

 
.Header--start-small { 
 
width: 25%; 
 
position: absolute; 
 
background-color: #42424C; 
 
color: white; 
 
margin-top: -10px; 
 
margin-left: 0px; 
 
padding-bottom: 57px; 
 
display: inline-block 
 
} 
 
.Arrow{ 
 
width: 0; 
 
height: 0; 
 
border-style: solid; 
 
border-width: 20px 0 20px 10px; 
 
border-color: transparent transparent transparent #42424c; 
 
display: inline-block; 
 
left: 25%; 
 
position: absolute; 
 
}

<div class="Header--wrapper"> 
 
    <div class="Header--start-small"></div><div class="Arrow"></div> 
 
</div>