核心思想：嵌套盒子中的◇超过父盒子的部分隐藏。
第一种写法：
<!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。
原文：http://www.cnblogs.com/wuqiuxue/p/7814110.html