使用純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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
