CSS，我怎样才能做与这个剪辑路径完全相反的事情？答案

【问题标题】：CSS, How can I do the exact opposite of this clip-path?CSS，我怎样才能做与这个剪辑路径完全相反的事情？
【发布时间】：2021-09-03 08:49:33
【问题描述】：

大家好，我正在尝试为我的 react 项目中的容器制作一个箭头返回形状，所以现在我设法使用 clipPath 制作了一个向前箭头：

<div style={{clipPath: 'polygon(0 0, 0 100%, 70% 100%, 100% 50%, 70% 0%)'}}>

这给了我以下信息： exampleContainer

所以我只希望箭头形状的路径指向左边，提前谢谢！

【问题讨论】：

多边形(0 50%, 30% 100%, 100% 100%, 100% 0%, 30% 0%)
bennettfeely.com/clippyclip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
两个答案都给了我非常相似的结果，谢谢，多边形的值到底是什么意思？

标签： css reactjs polygon clip-path

【解决方案1】：

这是您的原始箭头，以百分比形式显示多边形点的坐标。也就是说，多边形总宽度或高度的百分比取决于它是 x 轴还是 y 轴。记住 0,0 是左上角的位置。

您有几个选项可以反转它，您可以尝试 CSS 变换旋转。但要从头开始绘制，请注意此图中的要点：

并画出你的多边形：

div {
  clip-path: polygon(30% 0, 100% 0, 100% 100%,  30% 100%, 0 50%);
  /* for demo only */
  width: 80vmin;
  height:100vmin;
  background: green;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：