使用 CSS 将 Div 的左侧和右侧稍微倾斜

Question

这是我正在尝试创建的内容：

我应该能够做到这一点clip-path: polygon，但我不理解文档。

这个形状到底有什么属性？

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);- 上、左、下、右？50%是多少？0是什么？它们代表什么？文档似乎没有说，除非我错过了。

我从另一篇文章中找到了一些代码，结果如下：

.inner-container-top {
  width: 130px;
  font-size: 12px;
  font-weight: 600px;
  background: #8b000a;
  color: #ffffff;
  padding: 7px;
  clip-path: polygon(0% 100%, 100% 100%, calc(100% - 30px) 0%, 0% 0%, calc(100% - 30px) 0%, 0% 0%);
}

<div class="inner-container-top">HELLOWORLD</div>

但我再次不明白为什么要这样做。我需要翻转它，使其向相反方向倾斜，并在左侧创建一个倾斜。如果可以的话请帮忙。

Answer 1

该剪辑路径的顺序是左上、右上、右下、左下。

百分比是包含多边形的容器的 X、Y。

使用您可以使用的工具。更聪明地工作，而不是更努力:)

https://bennettfeely.com/clippy/

clip-path: polygon(31% 55%, 100% 55%, 75% 100%, 0% 100%);