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

请参考打击代码，我有更新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>

Answer 2

#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中相对于其他值的最后一个值来调整剪切的深度