使用CSS在Div的左右倾斜角度较小

问题描述

这是我要创建的内容：

我应该可以使用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%,0% 0%);
}

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

但是我还是不明白为什么为什么这样做。我将需要翻转它，以便它朝相反的方向倾斜，并在左侧也产生倾斜。如果可以的话，请帮忙。

解决方法

此剪切路径的顺序为左上，右上，右下，左下。

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

使用随时可用的工具。更聪明地工作，而不是更努力：）

https://bennettfeely.com/clippy/

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

clip-path html polygon