mozilla的clip-path多边形不起作用

Question

Mozilla有可能实现给定的风格吗？我在css中使用了剪辑路径但是当我试图在mozila上测试它时,剪辑路径不起作用

Answer 1

Firefox部分支持仅支持clip-path: url()语法.因此,要在FF中使用此工作,您可以使用内联svg并定义要用作url的clipPath.确保clipPathUnits在clipPath上设置属性,objectBoundingBox然后clipPath 的内容使用元素的边界框.

这是一个例子.

body {
  margin: 0;
}

ul.wrapper {
  position: relative;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.wrapper > li {
  position: absolute;
  width: 100%;
}

img {
  width: 100%;
  height: auto;
}

.clip {
  -webkit-clip-path: polygon(25% 0, 100% 0%, 100% 100%, 75% 100%);
  clip-path: polygon(25% 0, 100% 0%, 100% 100%, 75% 100%);
  -webkit-clip-path: url("#clipping");
  clip-path: url("#clipping");
}

<ul class="wrapper">
  <li>
    <img src="http://placehold.it/512x288/3498db/f1f1f1" alt="">
  </li>
  <li>
    <img class="clip" src="http://placehold.it/512x288/e67e22/f1f1f1" alt="">
  </li>
</ul>

<svg width='0' height='0'>
  <defs>
    <clipPath id="clipping" clipPathUnits="objectBoundingBox">
      <polygon points="0.25 0, 1 0, 1 1, 0.75 1" />
    </clipPath>
  </defs>
</svg>