0

我正在尝试仅使用 CSS 而没有图像来创建横幅效果。结果应该如下所示：

在此处输入图像描述

此示例是使用此 jsfiddle中的 html 和 CSS 创建的。这是横幅 ( .widget-title) 的 CSS：

.widget-title
{
    background-color: #B1DDC9;
    color: white;
    height: 24px;
    text-align: center;
}

.widget-title:before
{
    content: "";
    float:left;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 12px 0px 12px 12px;
    border-color: #B1DDC9 #B1DDC9 #B1DDC9 white;
}

.widget-title:after
{
    content: "";
    float:right;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 12px 12px 12px 0px;
    border-color: #B1DDC9 white #B1DDC9 white;
}

这似乎适用于我在桌面和手机上测试过的所有浏览器。然而，我的 Ipad2 上的 Safari 和 Chrome 都会在横幅的左右外边缘呈现一条微弱的细线：

在此处输入图像描述

是什么导致了这种现象？我能做些什么来解决它吗？

4

2 回答 2

1

这看起来像是三角形边缘的背景颜色，可能是由于某种亚像素渲染怪癖。从您的 CSS 来看，这不应该发生，因为三角形应该与标题的边缘对接，但那是您的 CSS ;)

不确定它是否适合您，但您可以尝试将position:relative标题和position:absolute两个三角形放在相关left:0的right:0位置，并将它们放置在您想要的位置。根据我的经验，就元素的最终位置而言，这通常比浮动更可靠。

作为旁注，您可以使用border-color:transparent您不想显示的三个面。这也将允许您将三角形放大一个像素，并将左/右重叠一个像素（即left:-1px）。那绝对应该解决您的问题。

于 2013-08-23T10:19:54.560 回答
-1

尝试更改border-width: 12px 0px 12px 12px; 为border-width: 12px 2px 12px 12px;

也许这会将三角形的“后部”延伸到横幅之外并摆脱这条线

于 2013-08-23T10:11:21.150 回答