使用CSS的border属性绘制各种几何形状的方法

前端  /  管理员 发布于 7年前   281

前言

border 边框属性可以说是我们在网页布局中最常用不过的一个属性之一。 border 它不只是边框，它还有很多非常有用的“黑魔法”哈，让我们一起来学习一下。

border绘制几何形状的原理

我们先来看一个简单的小例子：

在页面上写一个 div

<div class="border-test"><div>

给这个 div 加上以下样式

.border-test {  width: 200px;  height: 200px;  background-color: #000;  border-top: 50px solid red;  border-right: 50px solid yellow;  border-bottom: 50px solid blue;  border-left: 50px solid green;}

在浏览器预览可以看到下面的效果

接下来，我们把这个 div 的宽度跟高度都设为 0 ，看看是什么效果

是不是剩下4个不同颜色不同方向的三角形了，继续往下看，一起来见证下 border 的黑魔法。

border能绘制什么几何形状？

• 三角形
• 梯形
• 平行四边形
• 五边形
• 六边形
• 八边形
• 五角星
• 六角星
• ...

三角形
 

向上的三角形

要得到向上的三角形，是不是只要设置 上边框 的宽度为 0 ，设置 上边框 、 左边框 、 右边框 的边框颜色设为 transparent 透明，保留 下边框 的边框颜色就可以了，看代码：

<div class="triangle triangle-up"></div>

// 公共.triangle {    width: 0;    height: 0;}// 向上的三角形.triangle-up {    border-top: 0 solid transparent; // 这句这可以省略    border-right: 50px solid transparent;    border-bottom: 50px solid blue;    border-left: 50px solid transparent;}

还可以简写成，遵循 上右下左 顺序来设置

.triangle-up {    border-width: 0 50px 50px;  // 边框大小    border-style: solid;  // 边框样式    border-color: transparent transparent blue;  // 边框颜色}

下面代码都会用简写的形式。

向右的三角形

同理，设置 右边框 的宽度为 0 ，设置 上边框 、 右边框 、 下边框 的边框颜色为透明，保留 左边框 的边框颜色就可以了

<div class="triangle triangle-right"></div>

.triangle-right {    border-width: 50px 0 50px 50px;    border-style: solid;    border-color: transparent transparent transparent green;}

向下的三角形

同理，设置 下边框 的宽度为 0 ，设置 左边框 、 右边框 、 下边框 的边框颜色为透明，保留 上边框 的边框颜色就可以了

<div class="triangle triangle-bottom"></div>

.triangle-bottom {    border-width: 50px 50px 0;    border-style: solid;    border-color: red transparent transparent;}

向左的三角形

同理，设置 左边框 的宽度为 0 ，设置 上边框 、 下边框 、 左边框 的边框颜色为透明，保留 右边框 的边框颜色就可以了

<div class="triangle triangle-left"></div>

.triangle-left {    border-width: 50px 50px 50px 0;    border-style: solid;    border-color: transparent yellow transparent transparent;}

接下来再来看下如何实现下面的三角形呢？

其实不难发现，向左上的三角形刚好是向下的三角形的右半部分，所以要得到这个图形，是不是只要把向下的三角形左半部分的边框设为0就可以了，看代码：

<div class="triangle triangle-top-left"></div>

.triangle-top-left {    border-width: 50px 50px 0 0;    border-style: solid;    border-color: red transparent transparent;}

同理，可得到其他三个不同方向三角形，代码如下：

.triangle-top-right {    border-width: 50px 0 0 50px;    border-style: solid;    border-color: red transparent transparent;}.triangle-bottom-left {    border-width: 0 50px 50px 0;    border-style: solid;    border-color: transparent transparent blue;}.triangle-bottom-right {    border-width: 0 0 50px 50px;    border-style: solid;    border-color: transparent transparent blue;}

梯形

借助上面的实现三角形的方法，我们可以很容易的实现梯形，比如下面这个：

向上的梯形：

其实只要把上面 向上的三角形 的代码加上宽度就能实现了

.trapezoid {  width: 60px;  border-bottom: 60px solid red;  border-left: 60px solid transparent;  border-right: 60px solid transparent;}

同理，可以得到 向下的梯形

.trapezoid-bottom {    width: 50px;    border-top: 50px solid red;    border-left: 50px solid transparent;    border-right: 50px solid transparent;}

如果要得到向左和向右的梯形，需要把 width 设为 0 ，然后设置相应的高度值。

.trapezoid-left {    width: 0;    height: 50px;    border-width: 50px 50px 50px 0;    border-style: solid;    border-color: transparent red transparent transparent;}.trapezoid-right {    width: 0;    height: 50px;    border-width: 50px 0 50px 50px;    border-style: solid;    border-color: transparent transparent transparent red;}

平行四边形

只要一个 向上的三角形 跟 向下的三角形 结合起来就能实现，需要配合一个伪元素。

.parallelogram {    position: relative;    width: 0;    height: 0;    border-width: 0 50px 50px;    border-style: solid;    border-color: transparent transparent red;}.parallelogram:after {    position: absolute;    top: 0;    left: 0;    border-width: 50px 50px 0;    border-style: solid;    border-color: red transparent transparent;    content: "";}

五边形

梯形加上一个三角形，很容易就能组合成一个五边形，也需要配合一个伪元素来实现。

.pentagon {    position: relative;    width: 50px;    border-bottom: 50px solid red;    border-left: 50px solid transparent;    border-right: 50px solid transparent;}.pentagon:after {    position: absolute;    top: 50px;    left: -50px;    width: 0;    height: 0;    border-width: 75px 75px 0;    border-style: solid;    border-color: red transparent transparent;    content: "";}

六边形

如果两个相反方向且底边同样大小的梯形，叠加在一起，是不是就能得到一个六边形呢？同样需要配合一个伪元素来实现。

.hexagon {    position: relative;    width: 50px;    border-bottom: 50px solid red;    border-left: 50px solid transparent;    border-right: 50px solid transparent;}.hexagon:after {    position: absolute;    top: 50px;    left: -50px;    width: 50px;    border-top: 50px solid red;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    content: "";}

实战应用

聊天气泡

是不是用到了 向下的三角形 结合一个圆角矩形来实现。

下拉菜单

我们打开淘宝天猫，来看下它顶部的下拉菜单，是不是也用到 向上的三角形 和 向下的三角 形。

我们来看下它的实现代码：

再来看一个，我们打开京东秒杀

是不是就用到了我们上面分析的 平行四边形 来实现的，我们同样来看下它的实现代码：

就是通过一个矩形，然后配合两个伪元素的三角形结合起来实现的。

具体使用场景还有很多，大家可以根据自己平时项目开发中的实际需求来发挥想象。

能用CSS样式搞定的效果就不要使用图片哈，不仅有利于后期的维护，也能减少网页的请求，提高页面的加载速度。

总结

其实通过各种组合，还可以实现很多不同的形状，这里就不一一列举了。比如还可以实现 八边形 、 五角星 、 六角星 、 八角星 、 十二角星 等等， border 就是这么强大。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。