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

站长资源 2025/10/25 佚名

2 0 1

黑松山资源网 Design By www.paidiu.com

前言

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 就是这么强大。

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

CSS,border属性,几何形状

黑松山资源网 Design By www.paidiu.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

黑松山资源网 Design By www.paidiu.com

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

暂无评论...

www.paidiu.com 黑松山资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

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

css 11种方法实现一个tips带有描边的小箭头

用CSS画一个带阴影的三角形的示例代码

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

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

css 11种方法实现一个tips带有描边的小箭头

用CSS画一个带阴影的三角形的示例代码

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

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存