美文网首页
css实现三角

css实现三角

作者: 给我小前端 | 来源:发表于2017-06-27 13:51 被阅读6次

    <!DOCTYPE html>
    <html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style type="text/css">
            /*箭头向上*/
            
            .arrow-up {
                width: 0;
                height: 0;
                border-left: 30px solid transparent;
                border-right: 30px solid transparent;
                border-bottom: 30px solid #fea;
            }
            /*箭头向下*/
            
            .arrow-down {
                width: 0;
                height: 0;
                border-left: 20px solid transparent;
                border-right: 20px solid transparent;
                border-top: 20px solid #0066cc;
            }
            /*箭头向左*/
            
            .arrow-left {
                width: 0;
                height: 0;
                border-top: 30px solid transparent;
                border-bottom: 30px solid transparent;
                border-right: 30px solid yellow;
            }
            /*箭头向右*/
            
            .arrow-right {
                width: 0;
                height: 0;
                border-top: 50px solid transparent;
                border-bottom: 50px solid transparent;
                border-left: 50px solid green;
            }
        </style>
    </head>
    
    <body>
        <div class="arrow-up">
            <!--向上的三角-->
        </div>
        <div class="arrow-down">
            <!--向下的三角-->
        </div>
        <div class="arrow-left">
            <!--向左的三角-->
        </div>
        <div class="arrow-right">
            <!--向右的三角-->
        </div>
    </body>
    

    </html>

    相关文章

      网友评论

          本文标题:css实现三角

          本文链接:https://www.haomeiwen.com/subject/ephecxtx.html