css实现三角形

看代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                background:#ccc;
            }
            .example{
                margin:100px auto;
                width:0;
                height:0;
                border-top:10px solid blue;
                border-bottom:10px solid red;
                border-left:10px solid yellow;
                border-right:10px solid black;
            }
            .up{
                width:0;
                height:0;
                border-top:10px solid transparent;
                border-bottom:10px solid red;
                border-left:10px solid transparent;
                border-right:10px solid transparent;
            }
 
        </style>
    </head>
    <body>
        <div class="example"> </div> 
        <div class="up">
            
        </div>


   </body> 
</html>

显示效果如图：

箭头向上时，将左、右、上的箭头颜色改为透明即可；

箭头向下时，将左、右、下的箭头颜色改为透明即可；

箭头向左时，将上、下、右的箭头颜色改为透明即可；

箭头向右时，将上、下、左的箭头颜色改为透明即可；

显示效果如图：

css实现三角形

推荐阅读