左边是圆形的CSS三角形边？第2部分

Question

这应该是这样的： align top http://www.kerrydeaf.com/arrow.png

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。感谢您的更新，这就是我所看到的：

align top http://www.kerrydeaf.com/arrow2.png

更新：@andyb。它现在已经解决，并且是iOS 6刺激器的屏幕截图。 align top http://www.kerrydeaf.com/arrow3.png

更新：问题：我如何向下移动一个黄色的盒子，在没有留下空隙的情况下将盒子碰到一个浅蓝色的盒子？

align top http://www.kerrydeaf.com/arrow4.png

更新：答：现在已经解决了：在span.trig_italic2 CSS上添加了这个边距底部：-8.5px并且它有效。 （图片不包括在内）

Answer 1

而不是创建一个黄色三角形，如何创建一个白色三角形来砍掉结束？

这确实依赖于使<span>更宽一些，因为结尾将被白色三角形所占据。因此，可以为display:inline-block提供范围，以使width生效。我还必须给高度设置一个较小的值，并使line-height等于font-size，以使文本在块的中间垂直对齐。

编辑：由于背景是非纯色，另一种方法是使用linear-gradient来切断结尾。这种方法的（轻微）缺点是斩波点的开始在CSS中是硬编码的，并且不适应可变宽度内容。

Updated demo（仅限Webkit）

span.trig_italic2 {
    color:#000000;
    line-height:12px;
    font-size:12px;
    font-family:opensansitalic;     
    width:136px;
    display:inline-block;
    height: 12px;
    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;
    background:-webkit-linear-gradient(45deg, #FFCC05 100px, transparent 100px);
}

使用纯色背景的原始答案如下所示。

Original demo（仅限Webkit）

span.trig_italic2 {
    color:#000000;
    line-height:12px;
    font-size:12px;
    font-family:opensansitalic;     
    width:136px;
    display:inline-block;
    height:12px;
    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:after {
    content:"";
    display:block;
    position: absolute;
    right:0;
    top:0;
    width:0;
    border:12px solid transparent;
    border-color:#fff #fff transparent transparent;
}

Answer 2

问题在于填充增加了框大小，除非您将box-sizing设置为border-box。

我会这样做：http://jsfiddle.net/zQKhb/9/