css3

css3 三角形+箭头  原文

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--<div class="a">4325</div>-->
<span id="demo16">文字内容</span>
<hr/>

<span class="demo18">3333</span>

<style>
    /*弄两个三角形，用全透明去挡住有颜色的*/
    .demo18{position: relative;}
    .demo18:after,.demo18:before{border: 10px solid transparent;
        width:0px;height:0px;
        border-bottom:10px solid #fff;    /*透明三角形*/
        content: '';
        position: absolute;
        top:0;
        right:-21px;
    }
    .demo18:before{           /*看得到的三角形*/
        border-bottom-color: green;
        top:-2px;
        right:-21px;
    }

    #demo16{
        position: relative;
    }
    #demo16:after, #demo16:before {
        border: 10px solid transparent;
        border-left: 10px solid #fff;
        width: 0;
        height: 0;
        position: absolute;
        top: 0;
        right: -20px;
        content: ' '
    }

    #demo16:before {
        border-left-color: #f00;
        right: -21px;
    }
</style>
<hr/>
http://ourjs.com/detail/532bc9f36922aa7e1d000001
</body>
</html>
View Code

 选择器

>  子代    + 相邻   ~兄弟 

 大儿子 +邻居  ~= 兄弟 

posted @ 2016-10-26 15:14  gyz418  阅读(167)  评论(0)    收藏  举报