精简设置三角形

tip：设置三角形非常简单。

只需把标签的宽和高设为0；

把border给个宽度和透明（transparent）：border: 20px transparent solid;

给其中一边设置颜色： border-top-color: #000;

即可完成一个三角形。

代码html：

css代码：

.san1{

/*箭头向下*/
width:0px;
height:0px;
border: 20px transparent solid;/*transparent透明*/
border-top-color: #000;
}

效果图：

其他三角形代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设置三角形</title>
        <style>
            .san1{
                /*箭头向下*/
                width:0px;
                height:0px;
                border: 20px transparent solid;/*transparent透明*/
                border-top-color: #000;
            }
             .san2{
                /*箭头向上*/
                width:0px;
                height:0px;
                border: 20px transparent solid;/*transparent透明*/
                border-bottom-color: #000;
            }
             .san3{
                /*箭头向左*/
                width:0px;
                height:0px;
                border: 20px transparent solid;/*transparent透明*/
                border-right-color: #000;
            }
             .san4{
                /*箭头向右*/
                width:0px;
                height:0px;
                border: 20px transparent solid;/*transparent透明*/
                border-left-color: #000;
            }
        </style>
    </head>

    <body>
        1.箭头向下
        <div class="san1"></div>

        2.箭头向上
        <div class="san2"></div>
        
        3.箭头向左
        <div class="san3"></div>
        
        4.箭头向右
        <div class="san4"> </div>
       
    </body>
</html>

效果图：

posted @ 2017-03-02 17:38 江山代有才人出阅读(263) 评论(0) 编辑收藏举报

刷新页面返回顶部

江山如画

版权声明：本博客所载文章，原创文章的版权归本人所有，未经许可，不得转载。转载文章的版权归原作者所有，如果侵犯了您的版权，请通知本人，本人将会删除相应文章。

精简设置三角形

公告