CSS border属性绘制各种几何形状

2019-02-2619:13:43网页制作已关闭评论2,863 views字数 4417阅读模式

border边框属性可以说是我们在网页布局中最常用不过的一个属性之一。border它不只是边框，它还有很多非常有用的“黑魔法”哈，让我们一起来学习一下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

border绘制几何形状的原理

我们先来看一个简单的小例子：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

在页面上写一个div文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

<div class="border-test"><div>
复制代码

给这个div加上以下样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

.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;
}
复制代码

在浏览器预览可以看到下面的效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

接下来，我们把这个div的宽度跟高度都设为0，看看是什么效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

是不是剩下4个不同颜色不同方向的三角形了，继续往下看，一起来见证下border的黑魔法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

border能绘制什么几何形状？

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

三角形

向上的三角形

要得到向上的三角形，是不是只要设置上边框的宽度为0，设置上边框、左边框、右边框的边框颜色设为transparent透明，保留下边框的边框颜色就可以了，看代码：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

<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;
}
复制代码

还可以简写成，遵循上右下左顺序来设置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

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

下面代码都会用简写的形式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

向右的三角形

同理，设置右边框的宽度为0，设置上边框、右边框、下边框的边框颜色为透明，保留左边框的边框颜色就可以了文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

<div class="triangle triangle-right"></div>
复制代码

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

向下的三角形

同理，设置下边框的宽度为0，设置左边框、右边框、下边框的边框颜色为透明，保留上边框的边框颜色就可以了文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

<div class="triangle triangle-bottom"></div>
复制代码

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

向左的三角形

同理，设置左边框的宽度为0，设置上边框、下边框、左边框的边框颜色为透明，保留右边框的边框颜色就可以了文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

<div class="triangle triangle-left"></div>
复制代码

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

接下来再来看下如何实现下面的三角形呢？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

其实不难发现，向左上的三角形刚好是向下的三角形的右半部分，所以要得到这个图形，是不是只要把向下的三角形左半部分的边框设为0就可以了，看代码：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

<div class="triangle triangle-top-left"></div>
复制代码

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

同理，可得到其他三个不同方向三角形，代码如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

.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;
}
复制代码

##梯形文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

借助上面的实现三角形的方法，我们可以很容易的实现梯形，比如下面这个：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

向上的梯形：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

其实只要把上面向上的三角形的代码加上宽度就能实现了文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

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

同理，可以得到向下的梯形文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

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

如果要得到向左和向右的梯形，需要把width设为0，然后设置相应的高度值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

.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;
}
复制代码

平行四边形

只要一个向上的三角形跟向下的三角形结合起来就能实现，需要配合一个伪元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

.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: "";
}
复制代码

五边形

梯形加上一个三角形，很容易就能组合成一个五边形，也需要配合一个伪元素来实现。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

.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: "";
}
复制代码

六边形

如果两个相反方向且底边同样大小的梯形，叠加在一起，是不是就能得到一个六边形呢？同样需要配合一个伪元素来实现。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

.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: "";
}
复制代码

实战应用

聊天气泡

是不是用到了向下的三角形结合一个圆角矩形来实现。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

下拉菜单

我们打开淘宝天猫，来看下它顶部的下拉菜单，是不是也用到向上的三角形和向下的三角形。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

我们来看下它的实现代码：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

再来看一个，我们打开京东秒杀文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

是不是就用到了我们上面分析的平行四边形来实现的，我们同样来看下它的实现代码：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

就是通过一个矩形，然后配合两个伪元素的三角形结合起来实现的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

具体使用场景还有很多，大家可以根据自己平时项目开发中的实际需求来发挥想象。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

能用CSS样式搞定的效果就不要使用图片哈，不仅有利于后期的维护，也能减少网页的请求，提高页面的加载速度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

总结

其实通过各种组合，还可以实现很多不同的形状，这里就不一一列举了。比如还可以实现八边形、五角星、六角星、八角星、十二角星等等，border就是这么强大。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

作者：dazhi
链接：https://juejin.im/post/5c701a8cf265da2dd37c1fde
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9702.html

CSS border属性绘制各种几何形状

border绘制几何形状的原理

border能绘制什么几何形状？

三角形

向上的三角形

向右的三角形

向下的三角形

向左的三角形

平行四边形

五边形

六边形

实战应用

聊天气泡

下拉菜单

总结

3 种方式实现 CSS 弧形卡片

CSS新手菜鸟入门指南教程

GPT-4V新玩法：随手一画就能生成网页！

CSS负边距小范围使用两列布局

CSS使用justify实现 text-align文本两端对齐

CSS无需图片，实现圆角边框渐变色+背景透明效果

CSS 两行文字两端对齐与字符间距的处理技法

CSS Reset是什么？主流有哪几款？

CSS 新功能：锚点定位、Shapes、滚动捕捉(scroll snap)

CSS颜色混合函数color-mix深入了解