Question

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

请考虑以下代码：

  <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

实际上，正如Layne评论的那样，你想要的是抗锯齿。

不知何故，获得这种方法的一种方法是使用渐变。

demo

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

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

Answer 2

实际上它是拉伸的，因为border-left值是非常高的，如果你使用相等的值而不是你将解决这个问题

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

在两个边框之间制作平滑的角度线

2 个答案: