在两个边框之间创建平滑的角度线

当我试图在两个边框之间创建角度时，我会获得锯齿状（像素）线条。在两个边框之间创建平滑的角度线

请考虑下面的代码：

<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/

如何使其光滑有什么建议？

来源

2013-09-01 pan1cmode

你的小提琴是空白的。 – j08691

我在这里做了一个：http://jsfiddle.net/bQYU7/1/ –

我怀疑css支持antialising，我很乐意在这个问题上得到纠正，但我对此表示怀疑。 – 2013-09-01 18:06:23

其实，你想被称为抗锯齿什么，莱恩评论。

一种方式来获得，在某种程度上，正在使用渐变。

demo

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

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

来源

2013-09-01 18:51:04 vals

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

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

来源

2013-09-01 17:54:39 Hushme

这是事情......我需要某个角度切割我的另一个分区。但现在我想我可以使用svg解决我的问题。 – pan1cmode

在两个边框之间创建平滑的角度线

回答

相关问题