使用border的特性来完成 三角形
1.一个border是由四个三角(上右下左)生成的一个像素
<style>
div{
width: 0;
height: 0;
border-top: 100px solid orange;
border-right: 100px solid orchid;
border-bottom: 100px solid orangered;
border-left: 100px solid olivedrab;
}
</style>
接下来只要显示出你需要的三角形就好了,其他的属性设置 transparent (透明的)就完美实现啦。
<style>
div{
width: 0;
height: 0;
border-top: 100px solid orange;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid transparent;
}
</style>
直角三角形
<style>
div{
width: 0;
height: 0;
border-top: 100px solid orange;
border-right: 100px solid orange;
border-bottom: 100px solid transparent;
border-left: 100px solid transparent;
}
</style>