纯CSS绘制图形的三种方法

绘制图形

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

clip-path

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

比如:构建一个三角形

   

结果为:

image.png

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

  • circle

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

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

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

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

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

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

比如:

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

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

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

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

比如:

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

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

  • 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');
}
image.png

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


总结:

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

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

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

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

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

image.png

代码如下:

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

image.png

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

image.png

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

image.png

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

image.png

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

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

image.png
        
热卖
热卖
热卖

第三种方法:svg路径

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

image.png

   

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

更复杂的使用还待研究

你可能感兴趣的:(纯CSS绘制图形的三种方法)