css直接写出小三角

在开发移动端项目时,总是遇到很多小三角,之前一直用图片,感觉好麻烦,今天尝试了直接用CSS写出小三角!
先看看如何写出各种小三角!

<!DOCTYPE HTML>
<html lang="en-US">
<head>
        <meta charset="UTF-8">
        <title>qdabc.cn</title>
        <style type="text/css">
            div{ margin-bottom:20px;}
               /*箭头向上*/
                .arrow-up {
                        width:0; 
                        height:0; 
                        border-left:30px solid transparent;
                        border-right:30px solid transparent;
                        border-bottom:30px solid #000;
                }
                        
                 /*箭头向下*/
                .arrow-down {
                        width:0; 
                        height:0; 
                        border-left:30px solid transparent;
                        border-right:30px solid transparent;
                        border-top:30px solid #000;
                }
                        
                 /*箭头向左*/
                .arrow-left {
                        width:0; 
                        height:0; 
                        border-top:30px solid transparent;
                        border-bottom:30px solid transparent; 
                        border-right:30px solid #000; 
                }
                   
                /*箭头向右*/
                .arrow-right {
                        width:0; 
                        height:0; 
                        border-top:30px solid transparent;
                        border-bottom: 30px solid transparent;
                        border-left: 30px solid #000;
                }
                
                .box{ width:300px; height:300px; background:#838383; position:relative;}
                .box:after{
                    position:absolute;
                        right:-20px;
                        top:10px;
                    display:block;
                        content:"";
                    width:0; 
                        height:0; 
                        border-top:20px solid transparent;
                        border-bottom: 20px solid transparent;
                        border-left: 20px solid #838383;
                }
                
        </style>
</head>
<body>
        
        <div class="arrow-up">
     <!--向上的三角-->
        </div>
        <div class="arrow-down">
                <!--向下的三角-->
        </div>
        <div class="arrow-left">
                <!--向左的三角-->
        </div>
        <div class="arrow-right">
                <!--向右的三角-->
        </div>
        
        <div class="box">
                 :after 伪元素在元素之后添加内容实现小三角
        </div>
        
        
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » css直接写出小三角

赞 (1)
分享到:更多 ()

发表评论 0