核心思想：嵌套盒子中的◇超过父盒子的部分隐藏。
第一种写法：
<!DOCTYPE html><html><head> ???<meta charset="utf-8" /> ???<title></title> ???<style> ???????div{ ???????????width:100px; ???????????height:30px; ???????????background-color:#eee; ???????????position:relative; ???????} ???????i,s{ ???????????text-decoration:none; ???????????font-style:normal; ???????} ???????i{ ???????????position:absolute; ???????????right:0; ???????????top:12px; ??????????????width:10px; ???????????height:7px; ???????????background-color:aliceblue; ???????????font:400 13px/13px "微软雅黑"; ???????????overflow:hidden; ???????} ???????s{ ???????????position:absolute; ???????????top:2px; ???????} ???</style></head><body> ???<div> ???????<i><s>◇</s></i> ???</div></body></html>第二种写法：
<!DOCTYPE html><html><head> ???<meta charset="utf-8" /> ???<title></title> ???<style> ???????div{ ???????????width:100px; ???????????height:30px; ???????????background-color:#eee; ???????????position:relative; ???????} ???????i,s{ ???????????text-decoration:none; ???????????font-style:normal; ???????} ???????i{ ???????????position:absolute; ???????????right:0; ???????????top:12px; ??????????????width:10px; ???????????height:7px; ???????????background-color:aliceblue; ???????????font:400 13px/13px "微软雅黑"; ???????????overflow:hidden; ???????} ???????s{ ???????????display:block; ???????????margin-top:-6px; ???????} ???</style></head><body> ???<div> ???????<i><s>◇</s></i> ???</div></body></html>效果：
注释：s标签必须转成块级元素，display的值必须是block。
html——◇demo
原文地址：http://www.cnblogs.com/wuqiuxue/p/7814110.html