如何用css塑造图像？

Question

我如何用CSS做到这一点，我试图这样做  使用clip-paht，但Mozilla FireFox不支持它！

.div{
  -webkit-clip-path: polygon(1% 100%, 54% 85%, 67% 81%, 78% 79%, 91% 80%, 100% 82%, 100% 0, 0 0);
  clip-path: polygon(1% 100%, 54% 85%, 67% 81%, 78% 79%, 91% 80%, 100% 82%, 100% 0, 0 0);
}

Answer 1

Firefox 52及更早版本在剪辑路径中不支持多边形，但有一种解决方法：您可以在HTML中使用带有clipPath的svg元素，如下所示：

＆＃13;

＆＃13;

.div{
  background: blue; width:100%; height:200px; 

  -webkit-clip-path: polygon(1% 100%, 54% 85%, 67% 81%, 78% 79%, 91% 80%, 100% 82%, 100% 0, 0 0);

  clip-path: url("#myPolygon"); /*Firefox*/

  clip-path: polygon(1% 100%, 54% 85%, 67% 81%, 78% 79%, 91% 80%, 100% 82%, 100% 0, 0 0);
}

＆＃13;

<div class="div">&nbsp;</div>
  
<svg width="0" height="0">
  <clipPath id="myPolygon" clipPathUnits="objectBoundingBox">
    <polygon points=".01 1.00, .54 .85, .67 .81, .78 .79, .91 .80, 1.00 .82, 1.00 0, 0 0" />
  </clipPath>
</svg>

＆＃13;

＆＃13;

＆＃13;

请注意，由于您的坐标是百分比，我们必须使用clipPathUnits = "objectBoundingBox"属性并定义0到1范围内的数字（例如，54％应写为0.54）

Answer 2

由于这是实验属性，您需要使用＆＃34; -moz-clip-path＆＃34;在firefox中工作。