效果图:
1、html 代码
<div>较昨日 <span class="dot-up"></span> 20%</div> <div>较上周 <span class="dot-down"></span> 20%</div>
2、css 代码
<style type="text/css"> /* 向上的箭头 */ .dot-up { display: inline-block; font-size: 0; line-height: 0; border-width: 8px; border-color: #00B39E; transform: rotate(180deg); border-bottom-width: 0; border-style: dashed; border-top-style: solid; border-left-color: transparent; border-right-color: transparent; } /* 向下的箭头 */ .dot-down { display: inline-block; font-size: 0; line-height: 0; border-width: 8px; border-color: #F2423A; border-top-width: 0; border-style: dashed; border-bottom-style: solid; transform: rotate(180deg); border-left-color: transparent; border-right-color: transparent; } </style>