前言

如何使用 CSS 实现多边形？
相信大多数人肯定想到的是利用 border 实现

可能也有人想到 linear-gradient

但是这些仅针对一些简单的规则图形，若是复杂图形，则很难或者无法实现。

所以这里介绍一种新的方法，通过属性 clip-path 实现。

正文

clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
常用的属性值可以分为两类：SVG路径、基本形状。

SVG路径

语法：clip-path: url(#PathId);
说明：PathId 为 SVG 路径中的 clipPath 标签的 id 。

<svg width="0" height="0">
  <clipPath id="heart" clipPathUnits="objectBoundingBox">
    <path d="M0.738,0 c-0.106,0,-0.197,0.091,-0.237,0.189 C0.459,0.091,0.369,0,0.263,0 C0.119,0,0,0.128,0,0.284 c0,0.318,0.297,0.402,0.5,0.716 c0.191,-0.314,0.5,-0.409,0.5,-0.716 C1,0.128,0.881,0,0.738,0" />
  </clipPath>
</svg>

<div class="box">
  <div class="heart"></div>
</div>

.heart {
  width: 100%;
  height: 100%;
  background-color: red;
  clip-path: url(#heart); 
}

基本形状

矩形 inset

语法：clip-path: inset( <shape-arg>{1,4} [round <border-radius>]? ) ;
说明：四周(上右下左)边距 [round 圆角边框]

圆形 circle

语法：clip-path: circle( [<shape-radius>]? [at <position>]? );

shape-radius 圆的半径，默认直径为 Min(宽度, 高度)，支持百分比；
position 圆心位置，默认为元素中心点

椭圆 ellipse

语法：clip-path: ellipse( [<shape-radius>{2}]? [at <position>]? );

shape-radius x轴半径和y轴半径，默认值分别为宽度和高度的一半；
position 圆心位置，默认为元素中心点；

多边形 polygon

语法：clip-path: polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]{3,} );

fill-rule可选，表示填充规则用来确定该多边形的内部。可选值为 nonzero 和 evenodd ，默认值是 nonzero ；
后面的每对参数表示多边形的顶点坐标 (X, Y)，至少为3对；

【CSS 篇】clip-path

前言

正文

SVG路径

基本形状

矩形 inset

圆形 circle

椭圆 ellipse

多边形 polygon

实际应用

箭头步骤条

切换登录方式

兼容性

参考