html - 使用 HTML、CSS 绘制三角形和形状

Question

我正在创建一个 HTML 页面，该页面将在形状下写入文本，请参阅图片以供参考。为了绘制这个形状，我使用以下：

#chevron {
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 60px;
  width: 100%;
}

#chevron:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: red;
  transform: skew(0deg, 6deg);
}

#chevron:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: red;
  transform: skew(0deg, -6deg);
}

<div style="width: 100%">
  <div id="chevron">
  </div>
</div>

但是，形状与我要绘制的形状完全不同。

这是期望的结果：

标签： htmlcss

Answer 1

你可以使用clip-path这个网站很好地掌握它

在你的情况下，你需要这样的东西：

clip-path: polygon(100% 0, 100% 15%, 50% 25%, 0 15%, 0 0);