javascript - 左边有圆形的 CSS 三 Angular 形边？第2部分

Question

它应该是这样的:
_{(来源: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/

问题是很难有带 Angular 的矩形框来对齐上面的三 Angular 形吗？

它适用于使用混合编码的 iphone 应用程序。

更新:@andyb。感谢您的更新，这就是我看到的如下内容:

_{(来源:kerrydeaf.com)}

更新:@andyb。它现在已经解决了，并且是来自 iOS 6 stimulator 的屏幕截图。
_{(来源:kerrydeaf.com)}

更新:问题:如何向下移动黄色框并在不留空隙的情况下触摸浅蓝色框？

_{(来源:kerrydeaf.com)}

更新:回答:现在已经解决了:在 span.trig_italic2 CSS 上添加了这个 margin-bottom:-8.5px 并且它起作用了。 (不包括图像)

Answer 1

与其创建一个黄色三 Angular 形，不如创建一个白色三 Angular 形来切掉末端怎么样？

这确实依赖于制作 <span>宽一点，因为末端将被白色三 Angular 形占据。所以跨度可以给display:inline-block为了 width采取影响。我还必须给高度一个较小的值并使 line-height等于 font-size使文本在 block 的中间垂直对齐。

编辑:由于背景是非纯色，另一种方法是使用 linear-gradient 砍掉结尾。这种方法的(轻微)缺点是 chop 点的开始是硬编码在 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;
}