纯css 画任意图形

• 十字架

• demo

  <div class="mybox"></div>
  
  .mybox {
      width: 100px;
      height: 100px;
      background-color: #000;
      clip-path: path('M 20 30 L 43 30 L 43 10  L 50 10  L 50 30   L 73 30  L 73 36  L 50 36  L 50 58  L 43 58  L 43 36  L 20 36 z');
  }
  

  备注：

  • 600x600

    'M 120 180 L 260 180 L 260 60 L 300 60 L 300 180 L 440 180 L 440 220 L 300 220 L 300 350 L 260 350 L 260 220 L 120 220 z'

  • 300x300

    'M 60 90 L 130 90 L 130 30 L 150 30 L 150 90 L 220 90 L 220 110 L 150 110 L 150 175 L 130 175 L 130 110 L 60 110 z'

  • 100x100

    'M 20 30 L 43 30 L 43 10 L 50 10 L 50 30 L 73 30 L 73 36 L 50 36 L 50 58 L 43 58 L 43 36 L 20 36 z'

参考文章：(40条消息) 纯CSS绘制图形的三种方法_chen__cheng的博客-CSDN博客_css画图

使用场景：需要绘制线条形状的图形

path
类似canvas绘图
用一串字符串来表示，其中常用的参数有：

moveTo(m|M)
表明鼠标抬起，需要落到的点，不会绘制线条，只用于改变画笔的位置。如果最开始绘制的时候不指明，则默认是上一个点的位置

LineTo(L|l)
画笔需要到达的下一个点的位置，会绘制线条，上一个点与当前所处的点会连接成一条线。

ClosePath(z|Z)
从当前点到第一个点绘制一条线，主要用于闭合所绘制的图形。

以上参数一般使用其的缩写，但是有一点需要注意的是，除了(z|Z)外，参数大小写敏感
大写字母表示绝对位置，小写字母表示相对位置，相对于上一个点的位置。

以及这篇：

用CSS绘制最常见的40种形状和图形 – WEB骇客 (webhek.com)