预先存在的div中的新div与倾斜的边界

Question

我正在尝试制作一个标题，如附图所示。我在这个网站上尝试了其他答案，但没有一个真正帮助过。 我已经找到了文本和徽标部分，但需要有人帮助倾斜的div边界。

我想要的效果：

Answer 1

根据标题中的内容，您可以尝试使用三角形来模拟倾斜的边框;

＆＃13;

＆＃13;

header{
  width: 100%;
  height: 200px;
  background: #2c2d2e;
}

.triangle-right {
  width: 0; 
  height: 0; 
  border-top: 100px solid transparent;
  border-bottom: 100px solid transparent;
  position: absolute;
  left: 0;
  
  border-left: 200px solid white;
}

.triangle-left {
  width: 0; 
  height: 0; 
  border-top: 100px solid transparent;
  border-bottom: 100px solid transparent;
  
  border-right: 200px solid white;
  position: absolute;
  right: 0;
}

＆＃13;

<header>
  <div class="triangle-left"></div>
  <div class="triangle-right"></div>
</header>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个：

＆＃13;

＆＃13;

header {
  border:1Px solid;
  height: 200px;
  position: relative;
}

header:before, header:after {
  position: absolute;
  width: 0;
  height: 0;
  content: '';
  border-width: 100px;
  border-style: solid;
}

header:before {
  left: 0;
  border-color: transparent transparent transparent #000;
}

header:after {
  right: 0;
  border-color:transparent #000 transparent transparent ;
}

＆＃13;

<header></header>

＆＃13;

＆＃13;

＆＃13;