2. 绘制多边形 — clip-path 属性(补充多边形设置圆角border-radius)

1. 了解 clip-path 

  clip-path 属性是一个用来定义剪切元素可见部分的 CSS 属性。通过 clip-path 属性，你可以创建各种形状的剪切区域，从而实现不同的视觉效果。

     

2. clip-path 语法

clip-path 的值可以为 <shape> 或 inset(<top> <right> <bottom> <left>) 或 circle(<radius> at <position>) 或 ellipse(<radius-x> <radius-y> at <position>) 或 polygon(<points>)

• <shape>：可以是各种形状，如 circle(), ellipse(), polygon() 等。
• inset(<top> <right> <bottom> <left>)：创建一个矩形剪切区域，指定上、右、下、左边界的距离。
• circle(<radius> at <position>)：创建一个圆形剪切区域，指定圆心位置和半径。
• ellipse(<radius-x