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

terry 2年前 (2023-09-27) 阅读数 77 #数据结构与算法

border可以说，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，并设置上边，左框即可。将右边框的边框颜色从和设置为透明，并保持下边框从的边框颜色。看代码：

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

好吧简写就是，按照上、右、下、左的顺序设置

`。以下代码使用缩写形式。右三角形`

同样，将的右边缘的宽度设置为0，并将的上边缘和右边缘设置为

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

`、的下边框`

 的边框颜色是透明的。只需保留左边框的边框颜色即可。 
<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;
}
复制代码

##Trapezium

通过上面实现三角形的方法我们可以轻松实现如下的梯形：

向上的梯形：

基本上就是上面的加上宽度即可向上三角形

代码来实现此

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

如果您想获得左右梯形，您需要将宽度设置更改为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: "";
}
复制代码

`六边形`

将两个方向相反、底边尺寸相同的梯形叠起来，能组成一个六边形吗？它还必须使用伪元素来实现。" data-src="https://user-gold-cdn.xitu.io/2019/2/22/16915eaafab03860?imageView2/0/w/1280/h/960/format/webp/ignore-error /1" height="20" data-width="229" data-height="153" />

.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好厉害。 
作者：dazhi
链接：https://juejin.im/post/5c701a8cf265da2dd37c1fde
来源：掘金
版权归作者所有。商业转载请联系作者获得许可。非商业转载请注明出处。