1

这就是它的样子：（ 来源：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）对齐顶部

更新：问题：如何向下移动黄色框并触摸浅蓝色框而不留空隙？

对齐顶部
（来源：kerrydeaf.com）

更新：回答：现在解决了：在 span.trig_italic2 CSS 上添加了这个 margin-bottom:-8.5px 并且它有效。（不包括图片）

4

2 回答 2

4

与其创建一个黄色三角形，不如创建一个白色三角形来切断末端？

这确实依赖于使<span>宽一点，因为末端将被白色三角形占据。因此可以给出跨度display:inline-block以width使 生效。我还必须给高度一个较小的值并使line-height等于font-size保持文本垂直对齐在块的中间。

编辑：由于背景是非纯色，另一种方法是使用线性渐变来切断末端。这种方法的（轻微）缺点是截断点的开始在 CSS 中是硬编码的，并且不会适应可变宽度的内容。

更新的演示（仅限 Webkit）

在 Windows 7 上使用 Chrome 25 的结果

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);
}

下面留下了适用于纯色背景的原始答案。

原始演示（仅限 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;
}

​</p>

于 2012-11-26T11:24:18.560 回答
1

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

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

于 2012-11-26T12:12:05.387 回答