给div一个非矩形的形状[重复]答案

【问题标题】：Giving div a none rectangular shape [duplicate]给div一个非矩形的形状[重复]
【发布时间】：2018-10-07 06:30:10
【问题描述】：

我想给一个 div 非矩形形状（看看下面的图片，看看 div 应该是什么样子）。我尝试了几次转换，但无法达到预期的效果。这是一个代码sn-p

.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 形状？

【问题讨论】：

请添加您的代码并向我们展示您到目前为止所做的尝试
变换：skewX(-45deg);给出了最好的结果，但左右两侧仍然平行
我的意思是在 snnipet 中用 css 代码显示你的相关 html（编辑你的问题）
rotateX 没有改变边角
您尝试过使用 SVG 吗？

标签： html css transform

【解决方案1】：

使用css如下.tab

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>

【讨论】：

告诉我更多帮助:)