前言

是前端开发中常用的简易图形，如三角形、箭头、圆形等。 很多人最初想用小图像来实现，但是页面请求的次数会增加，页面加载效果会变慢。

CSS有border属性，可以生成各种简单的图形。 今天一起看看吧。

文章中的代码已经在github上了，有兴趣的同学自己拿。

359 Github.com/Zhouxiongking/article-pages/blob /主/体系/边界/边界. html

中央陆军

border讲解

在创建各种简单图形之前，请先看看border属性的使用。

border是复合属性。

边界宽度表示边框的宽度。

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

border-color表示边框的颜色，也可以设置transparent来表示透明。

border又分为上下左右四个方向，各个方向占据各自的空间，不出现重叠的地方。 特别是在设置了四个方向的边界线的情况下，四个角也不会重叠。

让我们来看看最简单的例子。 在4个方向上设置边框，标注不同的颜色。

图像1

从上面的照片1可以看出，四角是分离的，没有重叠。

梯形

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

梯形效果图

分析一下下台形式是如何实现的。

因为我们完全是用border设定的，所以这个div的高度必须是0。

梯形的左右腰就像边界与角相连一样，两侧的边界样式设置为“transparent”。

因此，将得到以下CSS代码。

梯形的CSS代码

可以通过更改左边框和右边框的宽度值来更改梯形的形状。

三角形

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

三角形

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

因为呈三角形的形状，正好和border的角的连接很相符，所以高度和宽度都必须为0。

由于下三角形的上部有区域，因此设置border-top。

在左边框和右边框两个方向上设定宽度，设定为透明即可。

因此，如果得到以下的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属性，画出了一系列简易的图形，这在实际中是很实用的，大家学会了吗?