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

它应该是这样的：
（来源：）

下面是一个JSFIDLE：

问题是很难让带角的长方体像上面那样对齐三角形

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

更新：@andyb。感谢您的更新，以下是我看到的：

（来源：）

更新：@andyb。现在问题解决了，iOS 6刺激器的屏幕截图。
（来源：）

更新：问题：我如何向下移动一个黄色的盒子并触摸一个浅蓝色的盒子而不留下空隙

---

更新：回答：现在已经解决了：在span.trig_italic2 CSS上添加了此页边距底部：-8.5px，效果良好。（不包括图像）

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

这取决于将

稍微加宽一点，因为末端将被白色三角形占据。因此，为了使

宽度

生效，可以给出span

显示：内联块

。我还必须给这个高度一个较小的值，使<代码>行高度等于<代码>字体大小< /代码>，以使文本在块的中间垂直对齐。

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

（仅限Webkit）

下面是使用纯色背景的原始答案

（仅限Webkit）

---

​

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

这取决于将

稍微加宽一点，因为末端将被白色三角形占据。因此，为了使

宽度

生效，可以给出span

显示：内联块

。我还必须给这个高度一个较小的值，使<代码>行高度等于<代码>字体大小< /代码>，以使文本在块的中间垂直对齐。

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

（仅限Webkit）

下面是使用纯色背景的原始答案

（仅限Webkit）

---

​

问题在于填充会增加框大小，除非将

框大小设置为
边框框

我会这样做：
问题在于填充会增加框大小，除非您将
框大小设置为
边框框

我会这样做：
对于那些认为“开箱即用”的有趣解决方案，总是a+1。我要试一试。我会再谈我的情况，我已经试过了。看起来很有前途。用白色三角形代替白色三角形，将末端切掉，使其成为透明的颜色，而不是白色三角形，这样效果如何？这是因为我有渐变背景色。它在ios刺激器上显示为透明，在iPhone应用程序上显示为白色。我已经更新了我的帖子，这是相关的。这是为了缩小黄色框“约会前”和浅蓝色框“设置约会”之间的差距？对于认为“开箱即用”有趣的解决方案，始终为a+1。我要试一试。我会再谈我的情况，我已经试过了。看起来很有前途。用白色三角形代替白色三角形，将末端切掉，使其成为透明的颜色，而不是白色三角形，这样效果如何？这是因为我有渐变背景色。它在ios刺激器上显示为透明，在iPhone应用程序上显示为白色。我已经更新了我的帖子，这是相关的。这是为了缩小黄色框“约会前”和浅蓝色框“设置约会”之间的差距？谢谢Andrey，它在iphone iOS 6和iOS 6刺激器上工作过。填充会在iPhone中单独产生问题，但其余的都可以。边框框起作用。我的方法的另一个特点是尽可能避免使用幻数。唯一的硬编码值是
36px
，即框的高度。宽度自动设置为内容的大小，因为
显示：内联块
，三角形位于
左侧：100%；顶部：0
表示它将始终位于块的右侧和顶部。这太棒了。我已经将高度降低到30px，它看起来也不错。谢谢Andrey，它在iphone iOS 6和iOS 6刺激器上工作。填充会在iPhone中单独产生问题，但其余的都可以。边框框起作用。我的方法的另一个特点是尽可能避免使用幻数。唯一的硬编码值是
36px
，即框的高度。宽度自动设置为内容的大小，因为
显示：内联块
，三角形位于
左侧：100%；顶部：0
表示它将始终位于块的右侧和顶部。这太棒了。我把高度降低到了30px，看起来也不错。很高兴看到这个问题有了答案。我认为下一部分应该作为另一个问题提出。当问另一个问题时，参考这个问题会非常有用，这样其他人可以获得一些背景知识。但是关于更新，我需要看到更多的标记。如果没有这些元素的标记和CSS，甚至无法猜测答案：-）下一部分现在已经解决。我在span.trig_italic2 CSS上添加了这个底部边距：-8.5px，效果很好。我希望自己尽可能多地这样做，这是学习CSS的最好方法。负边距可能不是解决这个问题的最简单方法。
span.trig_italic2
hav之后的元素
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;
}

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

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