设置border属性实现
实现思路: 将盒子的宽高都设置为0, 再通过设置border-top等属性来实现
<style>
#app{
width: 0px;
height: 0px;
border-bottom: 100px solid blue;
border-left: 50px solid green;
border-right: 50px solid gray;
margin: 20px;
}
#app1{
width: 0px;
height: 0px;
border-top: 100px solid blue;
border-left: 50px solid green;
border-right: 50px solid gray;
margin: 20px;
}
#app2{
width: 0px;
height: 0px;
border-left: 100px solid blue;
border-top: 50px solid green;
border-bottom: 50px solid gray;
margin: 20px;
}
#app3{
width: 0px;
height: 0px;
border-right: 100px solid blue;
border-top: 50px solid green;
border-bottom: 50px solid gray;
margin: 20px;
}
</style>
<div id="app"></div>
<div id="app1"></div>
<div id="app2"></div>
<div id="app3"></div>
通过设置不同的border边,就可以实现不同朝向的三角形,而设置不同的border宽度就可以实现不同形状的三角形