纯CSS绘制图形的三种方法

绘制图形

第一种方式：使用裁剪可视区的方式显示

clip-path

该属性使用裁剪方式创建元素的可显示区域，区域内的显示，区域外的不显示。

比如：构建一个三角形

   <div class="mybox"></div>
    <style>
        .mybox {
    width: 100px;
    height: 100px;
    background-color: yellow;
    clip-path: polygon(0% 0%,100% 0%,0% 100%);
}
    </style>

结果为：

该属性的使用：
属性值可以是函数：
circle：绘制圆
ellipse：绘制椭圆
polygon：绘制多边形
path: 用来定义形状的通用元素，所有的基本形状都可以用path来创建，是一种svg路径。

• circle

只指明半径，其中半径可以是百分比或者是数值，此时圆心默认为元素中心

.mybox {
    width: 100px;
    height: 100px;
    background-color: yellow;
    clip-path: circle(50%);
}

指明圆心，使用at标识符
此时，可以绘制圆的任意部分

.mybox {
    width: 100px;
    height: 100px;
    background-color: yellow;
    clip-path: circle(50% at 100% 100%);
}

使用场景：需要绘制与圆弧相关的图形

• ellipse
  需要同时指明横轴、竖轴、以及轴中心
  第一个参数表示横轴长度，第二个参数表示竖轴长度
  轴中心使用坐标表示，与横竖轴之间使用at连接

比如：

.mybox {
    width: 100px;
    height: 100px;
    background-color: yellow;
    clip-path: ellipse(50% 100% at 100% 100%);
}

其实只要合理运用横竖轴的长度，其作用还可以类比于圆的功能

使用场景：绘制有圆弧的图形

• polygon
  由于多边形是由点线组成，如果需要形成一个图形，至少需要三个点构成一个面，点之间相互连接

比如：

.mybox {
    width: 100px;
    height: 100px;
    background-color: yellow;
    clip-path: polygon(0% 0%,100% 0%,0% 100%);
}

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

• path

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

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

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

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

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

例子：绘制一个T形

.mybox {
    width: 600px;
    height: 600px;
    background-color: yellow;
    clip-path: path('M 100 100 L 400 100 L 400 200 L 275 200 L 275 500 L 225 500 L 225 200 L 100 200 z');
}

以上属性常用来绘制多边形状的图形，还有一些其他属性可以用来绘制除多边形以外的其他图形，用途场景很多。

---

总结：

属性	场景
circle	含有圆弧图形
ellipse	含有圆弧图形
polygon	多边形
path	任意图形

第二种方式：使用border属性来绘制

该方式只能绘制与三角形有关的图形，比如：三角形、梯形、以及他们之间的组合。
border这个属性涉及到三个属性，分别是：
border-color:边框颜色
border-style:边框样式
border-width:边框宽度

以上三个属性可以分别对left right bottom top进行设置，而border是对以上三个属性的总写。

设置border的属性，可以看出，如果在不设置元素的width/height的情况下，元素的border是由四个三角形组成

代码如下：

<div class="test"></div>

<style>
    .test {
    width: 0;
    height: 0;
    border-style: solid;
    border-color: red yellow khaki hotpink;
    border-width: 30px;
}
</style>

比如：绘制向右的三角形，此时只需要左边框保留，其余边框透明即可

<div class="test"></div>

<style>
    .test {
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent transparent hotpink;
    border-width: 30px;
}
</style>

由于相邻两个三角形可以组成一个斜着的三角形，所以保留相邻的边框，便可以实现效果：

<div class="test"></div>

<style>
    .test {
    width: 0;
    height: 0;
    border-style: solid;
    border-color: yellow transparent transparent yellow;
    border-width: 30px;
}
</style>

以上都是元素width/height为0的情况，如果设置width不为0，便可以得到一个梯形。
原因：盒子模型中content区域被撑开，使得其边框向四周扩散
比如：

<div class="test"></div>

<style>
    .test {
    width: 40px;
    height: 40px;
    border-style: solid;
    border-color: red yellow skyblue yellow;
    border-width: 30px;
}
</style>

所以从以上的思路可以衍生，我们可以利用这一点绘制梯形：
比如：一个正放的梯形

<div class="test"></div>

<style>
    .test {
    width: 40px;
    height: 0;
    border-style: solid;
    border-color: transparent transparent skyblue transparent;
    border-width: 30px;
}
</style>

可以看到这里height设置为0，我的理解就是减少多余的留白，本来使用border属性绘制图形，利用的就是border的其他边透明，但是实际上边还是存在的，而如果加上了height，留白便会增加。

小的案例：
步骤条：利用border属性完成

        <div class="step">
            <div class="chess leftrevel">
                <span>热卖<i></i></span>
            </div>
            <div class="chess">
                <span>热卖<i></i></span>
            </div>
            <div class="chess">
                <span>热卖 <i class="isrevel"></i></span>
            </div>
        </div>
        
        <style>
            .step {
    display: flex;
    .chess {
        width: 0;
        width: 0;
        margin-right:20px;
        border-style: solid;
        border-width: 25px 150px  25px 20px;
        border-color: #d7d7d7 #d7d7d7 #d7d7d7 transparent;
        position: relative;
        &.leftrevel{
            border-color: #ff6600;
            & i {
                border-left-color: #ff6600;
            }

            & span {
                color: white;
            }
        }

        & span {
            position: absolute;
            bottom: -10px;
            right: -50px;
            font-size: 18px;
            color: #5a5a5a;
            i {
                position: absolute;
                right: -150px;
                top: -12px;
                border-style: solid;
                border-width: 25px;
                border-color: transparent transparent transparent #d7d7d7;
            }

            .isrevel {
                display: none;
            }
        }


    }
}
        </style>

第三种方法：svg路径

利用path元素定义形状，所有的基本形状都可以使用该元素来创建。
比如：正方形

<svg width="600px" height="600px" viewBox="-300 -300 600 600">
   <path d="M 0 0 L 200 0 L 200 200 L 0 200 z" fill="#e94242"></path>
</svg>

其中d指明如何去绘制，fill指明填充区域的颜色

更复杂的使用还待研究