border制作三角形
程序员文章站
2022-04-25 11:17:43
...
border显示正方形
定义一个盒子（div)，不定义宽高，只定义边框，那么内容部分为零，所看到的部分就是边框，一个大小为0，只有边框的盒子，通过设置边框的大小，改变盒子的占位大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.triangle{
margin: auto;
width: 0px;
height: 0px;
border: 2px;
border-top:50px solid rgb(241, 238, 7);
border-right: 50px solid red;
border-bottom: 50px solid seagreen;
border-left:50px solid hsl(0, 87%, 27%);
}
</style>
</head>
<bod
<div class="triangle">
</div>
</body>
</html>
看到的颜色部分是边框，中心位置为内容部分为零。
三角形
如果将其中三面的颜色设置为透明，那么就可以得到一个三角形
把上面的代码三边的颜色改为transparent以后：
其余部分依然在，只不过是透明色的了
通过更改不同方向的边框值，可以得到不同的效果
上一篇： 建网站笔记