cssborder写法（教你制作各种简易图形）

在前端开发中经常会用到很多的简易图形，例如三角形，箭头，圆形等。有很多人一开始会想着用小的图片实现，不过这样会增加页面请求次数，延缓页面加载效果。

在CSS中有个border属性，它完全可以达到制作各种简易图形的效果，今天我们就一起来看看吧。

文章中的代码都已经放在了github上，感兴趣的同学自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/border/border.html

CSS

border讲解

在制作各种简易图形之前，我们先来看看border属性的使用。

border是一个复合属性。

• border-width表示边框宽度。

• border-style表示边框样式，设置实线，虚线，点状等。

• border-color表示边框颜色，还可以设置transparent，表示透明。

border又分为上下左右四个方向，每个方向都占据各自的空间，不会出现重叠的地方，尤其是在四个方向的边框都设置的情况下，在四个角处也不会出现重叠。

图片1

通过上面的图片1可以看出，四个角处是分离，没有重合的。

梯形

首先我们来看看梯形的效果图。

梯形效果图

我们再来分析下梯形是如何实现的。

• 因为我们完全是通过border设置，所以这个div的高度应该为0。

• 梯形的左右两个腰，恰好如同border在角的衔接处，然后将两侧的border-style设置为transparent。

因此我们可以得到以下的CSS代码。

梯形的CSS代码

修改border-left和border-right的宽度值，可以改变梯形的形状。

三角形

三角形也分为上下左右四个方向，我们首先来看看总体的形状。

三角形

然后我们也来分析下如何实现这个效果，以下三角形为例。

• 因为是呈现三角形的形状，刚好契合border在角落的衔接处，因此高度和宽度都应该为0。

• 下三角形是上部有区域，所以要设置border-top。

• border-left和border-right两个方向都要设置宽度，然后设置为透明即可。

因此得到以下的CSS代码，设置不同方向border的宽度，三角形的形状也会跟着变。

下三角形CSS代码

同理，只要掌握了其中一个方向的三角形原理，就会轻松写出其他方向三角形的CSS代码。

这里直接给出上三角形的CSS代码。

上三角形CSS代码

左三角形的CSS代码如下所示。

左三角形CSS代码

右三角形的CSS代码如下所示。

右三角形CSS代码

正方形-四种颜色

接下来我们看一种基本的只用border设计的形状。

图形

它的实现方式也很简单，只需要将width和height设置为0，然后将border四个方向的宽度设置成一样的即可。

得到的代码如下所示。

CSS代码

直角三角形

基于上述的实现，我们可以得到左下，左上，右上，右下四种三角形。

首先看看基本形状。

直角三角形

看到图形后，我们很容易发现，只要隐藏掉连接的两个方向的border，显示出另外两个方向的border，就可以得到直角三角形。

这里我们只展示出左上三角形的CSS代码。

左上直角三角形CSS代码

其他方向的直角三角形代码可类比得出，大家可以试一下。

六角星

首先我们看看六角星的形状。

六角星

看到这个图形，大家应该能想到可以由上下两个三角形构成，只要将上下两个三角形位置对应准确。

这里为了节省页面元素的空间，我们可以采用伪元素去实现。

• 将页面显示元素设置为上三角形。

• 利用:after伪元素设置下三角形。

• 设置伪元素的position为absolute，调节right和top值。

通过上述分析，我们得到以下CSS代码。

六角星CSS代码

圆形

与border属性搭配使用的还有一个很常用的属性，那就是border-radius。

border-radius是专门设置圆角的，可以让90度角变为圆角。

我们首先看看最基本的圆形的样子。

圆形

其实我们只需要将border-radius属性设置为宽或者高的一半以上即可。代码如下所示。

圆形

同心圆

我们来看看同心圆的样子。

同心圆

同心圆只需要设置一个border边框，给border设置一个特殊的背景色，给div设置成白色背景即可。

同心圆CSS代码

半圆

我们来看看半圆的形状。

半圆

半圆的效果是如何实现的呢？

• 首先元素自身高度设置为0，设定宽度值。

• 设定上部和右部的border。

• 设定左上角和右上角的border-radius值。

得到的代码如下所示。

上半圆

同理，下半圆，左半圆和右半圆修改对应的值就可以获得。

结束语

今天这篇文章主要通过border属性，画出了一系列简易的图形，这在实际中是很实用的，大家学会了吗?

,