* { margin:0; padding:0; } ul { width:100%; margin-top:200px; text-align:center; font-size:0; } ul li { display:inline-block; padding:8px 20px; font-size:14px; color:#222; border:1px solid #ddd; margin-right:20px; border-radius:4px; position:relative; cursor:pointer; } ul li.active:before { content:''; display:block; height:0; width:0; font-size:0; border:10px solid transparent; border-right:10px solid #008028; border-bottom:10px solid #008028; position:absolute; right:0; bottom:0; } ul li.active { border:1px solid #008028; } .icon { display:none; position:absolute; color:#fff; font-size:14px; bottom:-1px; right:2px; } ul li.active .icon { display:block; }
在<i class="icon">√</i> 中,根据需要可以用一个小 字体icon。