web前端纯css制作三角形

web前端纯css制作三角形

做法：

• 创建一个div
• 分别写出四个边的border（要设置 box-sizing=“border-box”）
• 给其他三个边设置透明度为0

1.先创建一个div 分别设置4个边的border

	<div class="app"></div>

	.app{
            width:300px;
            height:100px;
            border-top:70px solid red;
            border-right:150px solid green;
            border-left:150px solid blue;
            border-bottom:50px solid black;
            box-sizing: border-box;
        }

2.设置其他三个边的border透明度为0

	<div class="app"></div>

	.app{
            width:300px;
            height:100px;
            border-top:70px solid red;
            border-right:150px solid rgba(0,0,0,0);
            border-left:150px solid rgba(0,0,0,0);
            border-bottom:50px solid rgba(0,0,0,0);
            box-sizing: border-box;
        }

3.最终效果

前端进阶精选：点此去