triangle

2017-11-15  本文已影响0人  jrg陈咪咪sunny
三角形代码
<style>
    li{
        list-style:none;
    }
    li{
        width:0;
        height:0;
        border:50px solid;
        margin-top: 20px;;
    }
    li:first-child{
        border-color: #0802ff #ffff02 #028c02 #ff0602;
    }
    li:nth-child(2){
        border-color: #0802ff transparent transparent transparent;
    }
    li:nth-child(3){
        border-color:transparent transparent transparent #ff0602;
    }
    li:nth-child(4){
        border-color:transparent #ffff02 transparent transparent;
      }
    li:nth-child(5){
        border-color:transparent transparent #028c02 transparent;
    }
    li:nth-child(6){
        border:35px solid;border-color:transparent transparent #ff0602 #ff0602;
    }
    li:nth-child(7){
         border:35px solid;border-color:transparent #028c02 #028c02 transparent;
    }
</style>
<ul class="tle">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
triangle.png
上一篇 下一篇

猜你喜欢

热点阅读