Div 的左侧和右侧与 CSS 略微倾斜

Question

这是我要创建的内容：

我应该可以用 clip-path: polygon 做到这一点，但我不理解 documentation。

这个形状的具体属性是什么？

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

此 clip-path 的顺序是左上、右上、右下、左下。

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

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

https://bennettfeely.com/clippy/

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

Div 的左侧和右侧与 CSS 略微倾斜

Slant Left and Right Side of Div at Slight Angle With CSS

html

css

polygon

clip-path