css3 polygon

以下为语音合成的文章，请忽略其中的部分语法错误

CSS3的Polygon属性让我们在网页中创建出与众不同的形状，为网页添加立体感和趣味性的同时又不会让页面显得过于繁琐。Polygon参数较多，但基本上可以通过以下几个属性来掌握这一技能。

clip-path: polygon()

clip-path为裁切属性，而polygon为其裁切形状。此属性需要在元素中指定填充，以触发剪辑。裁剪形状属于SVG遵循相同的语法。

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    

此属性和语法用于入门级别的网络设计师和开发人员。在上面的例子中，将四个坐标作为参数传递给polygon，每个坐标代表多边形的一个角。在这种情况下，一个多边形是一个菱形。

clip-path: polygon(50% -20px, 100% 0, 100% 100%, 50% calc(100% + 20px), 0 100%, 0 0);
    

当然，复杂的多边形也可以通过不同的坐标组进行定义。在此例中，我们将创建一个六边形。要创建此形状，我们需要提供六个点，这些点永远不是机器中默认的点。这个基本的多边形可以通过调整其中的一些参数来制作自定义多边形，可以非常有趣。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！