实现一个三角形
哈喽呀~小伙伴们，今天继续摸鱼，公司已经欠我快20天的工资了，那就继续摸鱼。
在开始之前，如果作者有不对的地方或者有更好的方法请多多指教。
不卖关子，今天我们要实现的三角形是用border属性来完成的.
border属性相信大家都不陌生，在给一个盒子设置边框的时候我们都会用到border这个属性，你是不是以为边框就是由矩形组成的？实际上由三角形组成的。我们会认为边框是由矩形组成的，是因为我们平时在给盒子设置边框的时候，往往设置的都会比较窄，也就是给定的值比较小，我们一般会设置1px，2px。
上面废话这么多，结合下面的例子相信你们就能明白了：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
display: flex;
justify-content: space-between;
}
div {
margin-top: 20px;
}
.small {
width: 100px;
height: 100px;
border: 1px solid;
border-color: black red;
}
.middle {
width: 100px;
height: 100px;
border: 50px solid;
border-color: black red;
}
.big {
width: 100px;
height: 100px;
border: 200px solid;
border-color: black red;
}
</style>
</head>
<body>
<div class="small">给border设置一个相对小的值</div>
<div class="middle">给border设置一个相对中间的值</div>
<div class="big">给border设置一个相对大的值</div>
</body>
</html>
通过上面的了解之后，我们再来看下面一个例子：
在这里我们将元素的宽高都设置为0，来看看通过设置border属性绘制出来的效果：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 0;
height: 0;
border: 100px solid;
border-color: black red blue palegreen;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
上面的例子中，我们给容器的border属性设置的四个方向的值都为100，我们明显看到这个容器是由四个三角形组成，所以，我们要实现出三角形，就可以通过这个border属性来完成。
下三角
js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 0;
height: 0;
border-top: 100px solid palegoldenrod;
// border-left和border-right不设置transparent属性，则为下面第一个效果图
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
</style>
</head>
<body>
<div></div>
</body>
</html>不设置transparent的效果如下： 
设置transparent的效果如下：
上三角
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 0;
height: 0;
border-bottom: 100px solid palegoldenrod;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
左三角
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 0;
height: 0;
border-left: 100px solid palegoldenrod;
border-bottom: 100px solid transparent;
border-top: 100px solid transparent;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
右三角
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 0;
height: 0;
border-right: 100px solid palegoldenrod;
border-bottom: 100px solid transparent;
border-top: 100px solid transparent;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
总结
实现一个三角形，我们可以通过border属性和transparent实现，当要实现某一个方向的三角形时，我们记住三个步骤
- 设置三角形需要方向的border以及三角形的颜色。
- 设置三角形需要方向的
反方向的border为0。 - 设置除了第二点外的其他方向的颜色为transparent。
还是那句话，请小伙伴多多指教~