css - 在两个边界之间制作平滑的角度线

Question

当我试图在两个边界之间创建角度时，我得到了锯齿状（像素化）线。

请考虑以下代码：

  <div id="example"></div>

   #example:before{
    content: "";
    position: relative;
    width: 0;
    height: 0;
    left: 0;
    bottom: -40px;
    border-top: 20px solid black;
    border-left: 470px solid red;
}

这是一个小提琴：http: //jsfiddle.net/pan1cmode/bQYU7/2/

关于如何使它顺利的任何建议？

Answer 1

实际上，正如莱恩所说，您想要的称为抗锯齿。

以某种方式实现这一点的一种方法是使用渐变。

演示

#Ex2 {
    position: absolute;
    height: 40px;
    width: 470px;
    top: 80px;
    background: linear-gradient(3deg, red 39px, black 42px);
}

您可以通过红色和黑色停止之间的差异来调整平滑程度。（在这种情况下，介于 39 和 42 px 之间）

Answer 2

实际上它正在拉伸，因为border-left如果您使用相等的值，那么价值会非常高，而不是解决这个问题

http://jsfiddle.net/bQYU7/3/