利用css的border样式制作图形

来源：互联网发布：程序员入职自我介绍编辑：程序博客网时间：2024/04/27 19:29

在今天之前，我对css的border属性的认知，只停留在border:5px solid red;或者是
border-left: 1px solid #f00; border-right: 1px solid #f00; border-bottom: 1px solid #f00; border-top: 1px solid #f00;
又或者是把solid实线改成虚线等等的样式。但其实利用设置border的样式，我们可以制作出一些特别的图形，类似三角形、梯形等等的形状来点缀我们的页面，从而使页面变得更加美观。下面我们来看一下代码：

<!DOCTYPE html><html><head>    <title>css动画</title>    <meta charset="utf-8">    <style>        .up{            width: 0px;            height: 0px;            border-left: 20px solid transparent;            border-right: 20px solid transparent;            border-bottom: 20px solid red;            border-top: 20px solid transparent;        }    </style></head><body><div class="up"></div></body></html>

运行之后的结果为：
这里写图片描述
然后有点惊讶的发现，将div的宽高设置为0px，只利用边框就出现了一个三角形.此时将上边框设置颜色：

.up{            width: 0px;            height: 0px;            border-left: 20px solid transparent;            border-right: 20px solid transparent;            border-bottom: 20px solid #f00;            border-top: 20px solid #f00;        }

运行结果为：
这里写图片描述
将宽度设置为一定的数值不为0时代码如下：

.up{            width: 100px;            height: 0px;            border-left: 40px solid transparent;            border-right: 40px solid transparent;            border-bottom: 40px solid transparent;            border-top: 40px solid #f00;        }

运行结果为：
这里写图片描述
同样的，如果想改变图形的方向。我们只需将那个border设置颜色即可。通过改变边框的宽度就会出现更多各种各样不规则的图形。观察下方代码：

.up{            width: 0px;            height: 0px;            border-left: 40px solid #000;            border-right: 40px solid green;            border-bottom: 40px solid pink;            border-top: 40px solid #f00;        }

运行结果为：
这里写图片描述
我们会发现，当宽度为0，高度为0 时。四个边框设置宽度以后，组成了一个框。
设置上宽度和高度以后我们会发现：

.up{            width: 100px;            height: 100px;            border-left: 40px solid #000;            border-right: 40px solid green;            border-bottom: 40px solid pink;            border-top: 40px solid #f00;        }

这里写图片描述
从而打破了我以前认为的边框是一条直线，或者说设置上宽度以后的边框是一个矩形的想法。其实仔细想想，可以看做是拼图，可能就比较容易理解。
可能只是我本人刚刚发现这个。大家早就发现了。不过还是觉得前端高深莫测，仍需好好探索!

阅读全文

0 0