css代码如下:
<style>
.trangle{
width: 0;
height:0;
border-bottom: 150px solid rebeccapurple;
border-top: 150px solid rgb(9, 162, 233);
border-left: 150px solid rgb(240, 10, 98);
border-right: 150px solid rgb(9, 233, 76);
}
</style>
html代码:
<div class="trangle">
</div>
效果如下:
若是只创建一个三角形,则对于其他的边框设置透明颜色即可,这里要注意 :在使用透明属性“transparent”时需要将颜色这个属性值去掉,不然是出不来下效果的。
效果如下:
为什么设置边框能出现三角形的效果:利用的是边框和边框之间斜切的特点。