css <basic-shape>的基本形状函数有哪一些？如何使用？

polygon()函数用于使用任意数量的点定义更复杂的任意形状。

该函数接受一组坐标对（<shape-arg> <shape-arg>），每对指定一个点的位置。第一个参数表示点的x位置，第二个参数表示y位置。这组点构成了形状。浏览器将列表中的最后一个顶点与列表中的第一个顶点连接以关闭多边形，因此你不必自己执行此操作。

坐标对以逗号分隔，可以使用绝对长度或百分比进行设置。

除了坐标对的集合外，该polygon()函数还可以使用一个名为the的可选参数fill-rule。这指定了如何处理多边形内部可能与自身相交的区域。有关fill-rule详细信息，请参阅SVG中的属性 可能的值是nonzero或evenodd。省略时的默认值是nonzero。

以下是所有有效的polygon()函数声明：

polygon(0 0, 100% 100%, 0 100%);

polygon(0 0, 100% 100%, 0 100%);

polygon(50px 0px, 100px 100px, 0px 100px);

polygon(170.67px 291.00px, 126.23px 347.56px, 139.79px 417.11px, 208.92px 466.22px, 302.50px 482.97px, 343.67px 474.47px, 446.33px 452.00px, 443.63px 246.82px, 389.92px 245.63px, 336.50px 235.26px, 299.67px 196.53px, 259.33px 209.53px, 217.00px 254.76px);

polygon(evenodd, 446.33px 452.00px, 443.63px 246.82px, 389.92px 245.63px, ...);
接下面了我们看看使用基本形状函数定义基本形状的示例和实例：
示例1：指定参考框，定义一个圆
.element {  
   shape-outside：circle（100px at 50％50％）margin-box;
}
使用shape-outside属性定义用于更改元素浮动区域形状的形状。注意如何在属性声明中定义形状的引用框。
上面代码的结果看起来类似于下图：
示例2：定义了与clip-path属性一起使用的多边形形状，以将元素剪切为定义的形状：
.element {     
    clip-path：polygon（26px 111px，222px 386px，311px 281px，470px 393px，660px 293px，604px 47px，505px 107px，318px 37px，42px 107px）;
}
实例：使用clip-path属性将元素剪切为定义为属性值的形状。定义的形状是使用该polygon()函数的随机多边形形状。
html代码：
<div class="container">
  <p>未指定参考框，因此默认情况下设置边框。</p>
  <div class="element"></div>
</div>
css代码：
.container {
  margin: 40px auto;
  max-width: 700px;
}

.element {
  width: 100%;
  height: 0;
  padding-top: 75%;
  background: url(http://tympanus.net/codrops-playground/assets/images/cssref/datatypes/basic-shape/spring.jpg);
  background-size: 100% 100%;
  border: 1px solid grey;
  -moz-clip-path: polygon(13% 35%, 25% 18%, 44% 36%, 68% 24%, 97% 51%, 72% 68%, 41% 80%, 11% 65%);
  -webkit-clip-path: polygon(13% 35%, 25% 18%, 44% 36%, 68% 24%, 97% 51%, 72% 68%, 41% 80%, 11% 65%);
  clip-path: polygon(13% 35%, 25% 18%, 44% 36%, 68% 24%, 97% 51%, 72% 68%, 41% 80%, 11% 65%);
}
效果图：
总结：以上就是本篇文章的全部内容，大家可以自己动手试试，制作不同的形状，希望能对大家的学习有所帮助。
以上就是css <basic-shape>的基本形状函数有哪些？如何使用？的详细内容，更多请关注php中文网其它相关文章！
				
				

					
微信
					
分享
				

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



  
关键词：css <basic-shape>的基本形状函数有哪些？如何运用？