CSS中形状的粒度

Question

我想在html中实现这个目标：

我这样做（用红色表示更明显）：

span.triangle-bottomleft { 
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-right: 500px solid transparent;
}
span.triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-left: 500px solid transparent;
}

结果如下：

像素不是很细。是否可以使斜线更平滑？

谢谢！

Answer 1

根据我的小实验，看起来抗锯齿效果比边框宽度黑客效果好于背景图像解决方案。不幸的是，没有简单的CSS解决方案可以满足您的需求。

提供以下标记：

<div class="chevron"></div>

您可以使用以下策略（在此小提琴中查看所有内容：http://jsfiddle.net/teddyrised/dL2wswfm/1/）

---

背景图片黑客

这是通过指定CSS3和现代浏览器支持的多个背景图像来实现的。

.chevron {
    background-image:
        linear-gradient(to bottom left, #ccc 0%, #ccc 50%, transparent 50%, transparent 100%),
        linear-gradient(to bottom right, #ccc 0%, #ccc 50%, transparent 50%, transparent 100%);
    background-position:
        bottom left,
        bottom right;
    background-repeat: no-repeat;
    background-size: 50% 100%;
    background-color: red;
    width: 100%;
    height: 50px;
}

---

边境黑客

虽然边框黑客提供了最佳的视觉效果，但是无法对左右边框宽度使用百分比值 - 您必须使用绝对值（px，em ...）或相对值到视口（vh，vw，vmin，vmax）。这会将应用程序限制为延伸到视口的已知百分比的div：

.chevron {
    background-color: red;
    position: relative;
    width: 100%;
    height: 50px;
}
.chevron::before {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    right: 50%;
    bottom: 0;
    content: '';
    border-top: 50px solid #ccc;
    border-left: 50vw solid transparent;
}
.chevron::after {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 50%;
    right: 0;
    bottom: 0;
    content: '';
    border-top: 50px solid #ccc;
    border-right: 50vw solid transparent;
}

请参阅此处的小提琴：http://jsfiddle.net/teddyrised/dL2wswfm/1/