纯css实现三角形css实现三角形：首先写一个边框颜色不同的div盒子可以直观的看一下效果如果想要一个下的三角形，可以

首先写一个边框颜色不同的div盒子可以直观的看一下效果

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>css-三角形</title> 
    <style> 
        .triangle { 
            width: 0; 
            height: 0; 
            border: 100px solid; 
            border-color: orangered skyblue gold yellowgreen; 
        } 
    </style> 
</head> 
<body> 
    <div class="triangle"> </div> 
</body> 
</html>

如果想要一个下的三角形，可以让border的上边框可见，其他边框颜色都设置为透明

.down-triangle { 
    width: 0; 
    height: 0; 
    border-top: 50px solid orangered; 
    border-right: 50px solid transparent; 
    border-left: 50px solid transparent; 
}

想要上三角形/左三角形/右三角形同理可得