它应该是这样的：
（来源：kerrydeaf.com）
span.trig_italic2{color:#000000; line-height:17px;font-size:12px;font-family:opensansitalic;
width: 100px;
height: 36px;
background: #FFCC05;
position: relative;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
border-radius:5px 0 0 5px;
margin-right:50px;
padding:3px 4px 3px 4px;}
span.trig_italic2:before
{
content:"";
display:block;
position: absolute;
right: -22.5px;
top:0;
width: 0;
height: 0;
border: 11px solid transparent;
border-color: transparent transparent #FFCC05 #FFCC05;
}
这是一个jsfiddle：
http://jsfiddle.net/alma/zQKhb/2/
问题在于，很难使带有矩形的矩形框与上面的三角形对齐？
适用于使用混合编码的iPhone应用程序。
更新：@andyb。感谢您的更新，这是我看到的内容：
（来源：kerrydeaf.com）
更新：@andyb。现在已解决此问题，并从iOS 6刺激程序截取了屏幕截图。
（来源：kerrydeaf.com）
更新：问题：如何向下移动黄色框，并在不留缝隙的情况下将框触摸为浅蓝色框？
align top http://www.kerrydeaf.com/arrow4.png
更新：答案：现在已解决：在span.trig_italic2 CSS上添加了以下margin-bottom：-8.5px并成功运行。 （不包括图像）
最佳答案
问题在于填充会增加框的大小，除非您将box-sizing设置为border-box。
我会这样做：http://jsfiddle.net/zQKhb/9/