给div一个非矩形的形状

Question

我想给div一个非矩形的形状（请看下面的图片，以了解div的外观）。我已经尝试了几种转换，但是无法达到预期的效果。这是一个代码段

.container {
  height: 60px;
  background: #252b33;
  display: flex;
  align-items: flex-end;
}
.tab {
  background: #3b424b;
  height: 40px;
  width: 150px;
  margin: 0 50px
}
.tab1 {
  transform: skewX(-45deg);
}
.tab2 {
  transform: rotateX(45deg);
}

<div class="container">
  <div class="tab"></div>
  <div class="tab tab1"></div>
  <div class="tab tab2"></div>
</div>

我的问题是：如何使用CSS给出图像中显示的div形状？

Answer 1

对.tab使用css如下

border-bottom: 40px solid #555;
border-left: 20px solid transparent;
border-right: 20px solid transparent;

查看此处：

.container {
  height: 60px;
  background: #252b33;
  display: flex;
  align-items: flex-end;
}
.tab {
  height: 40px;
  width: 150px;
  margin: 0 0px;
  border-bottom: 40px solid #555;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

<div class="container">
  <div class="tab"></div>
  <div class="tab tab1"></div>
  <div class="tab tab2"></div>
</div>