HTML5 css下三角单引号怎么写

<style>

.test:after {display:inline-block content:"^" transform:rotate(180deg) scale(1.4,0.8)}

</style>

<span class="test">服务</span>

css3写三角形（为了好区分姑且按方向区别）：

（1）上三角形：

border: 16px solid transparent

border-bottom: 16px solid #f00

width: 0

height: 0

（2）下三角形：

border: 16px solid transparent

border-top: 16px solid #f00

width: 0

height: 0

（3）右三角形：

border: 16px solid transparent

border-left: 16px solid #f00

width: 0

height: 0

（4）左三角形：

border: 16px solid transparent

border-right: 16px solid #f00

width: 0

height: 0

虽然有答案了 ， 但也有必要让你知道下   这个可以用css写出来，而且 很简单 很方便

有CSS3属性

包括 IE9 以上 支持    需要 -ms-  和-webkit-    具体 看兼容文档吧 

.div{ 

        width: 0px 

        height: 0px 

        border-style: solid 

        border-color: transparent transparent transparent red 

        border-width: 20px 

        transform:rotate(45deg)

    }

---