时间戳

首页 > 解决方案 > 给 div 一个非矩形的形状

html - 给 div 一个非矩形的形状

问题描述

我想给一个 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 形状？

标签： htmlcsstransform

解决方案

使用 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>

推荐阅读