使用 border
【解释】不设置宽高,用边框大小控制三角型大小
【分解步骤】
设置一个div不设宽高
【示例】
<style>
#triangle{
width: 0;
height: 0;
border: 100px solid;
border-color: orangered skyblue gold yellowgreen;
}
</style>
2. 设置透明
留下想要指向方向相反的边框设定,其他方向的边框设为transparent透明
【示例】实现指向向上的三角形
<style>
.Up{
width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
border-bottom: 100px solid orangered;
}
</style>