【技能】使用纯CSS+html写出方向箭头，简单大方，好看

来源：互联网发布：健卫小口径5.6子弹数据编辑：程序博客网时间：2024/04/29 19:58

使用纯CSS+html写出方向箭头，贴出来就可以用，100%原创

<html>                <head>                <title></title>                                <meta http-equiv="content-type" content="text/html; charset=utf-8" />                    <style type="text/css">.pointsRule{    display: inline-block;    font-size: 12px;    margin-top: 20px;    float: left;    margin-left: 50px;}.pointsRule span{    float: left;    display: inline-block;}.pointsRule ul{    list-style: none;    margin: 0;    padding: 0;    display: inline-block;    float: left;    width: 100%;}.pointsRule ul li{    display: list-item;    text-align: center;    float: left;    margin: 10px 0 0;    background: #fff;    border-top: 1px solid #0F0F0F;    border-bottom: 1px solid #0F0F0F;    height: 45px;}.pointsRule ul li:first-child{    border-left: 1px solid #0F0F0F;}.pointsRule ul li:last-child{}.pointsRule ul li a{    display: block;    padding: 8px 0;    cursor: pointer;}.pointsRule ul li span{    vertical-align: middle;    width: 150px;    height: 18px;    line-height: 25px;    display: inline-block;    overflow: hidden;    text-align: center;    margin-left: 20px;}.pointsRule ul li  i {    float: right;    border: #130303 solid;    border-width: 1px 1px 0 0;    width: 32px;    height: 32px;    margin: -2px -17px 0px 10px;    top: 2px;    transform: rotate(45deg);    -webkit-transform: rotate(45deg);    background-image: url("");}                    </style>                </head>                <body> <div class="pointsRule">                 <span>欢迎成为VIP 诚邀您参加VIP购物积分回馈活动，尊享精彩纷呈的购物体验及贵宾礼遇！</span>                  <ul>                    <li ><a><span>1.累计购物积分</span><i></i></a></li>                    <li><a><span>2.兑换购物积分</span><i></i></a></li>                    <li><a><span>3.使用积分抵用电子礼券</span><i></i></a></li>                 </ul>             </div>                          </body></html>

6 0