使用渐变时边缘丑陋

Question

我尝试创建一个2色背景，将其用作文本容器的背景。为了获得两种不同的颜色，我使用了渐变色。让我告诉你现在的样子。

如果你仔细观察，你可以看到中间的线看起来很像，我不知道该怎么称呼它，让我们说它看起来并不顺畅。

这是我的css：

.btn {
    background:#8a8a8a;
    background: linear-gradient(to right bottom, #000000 50%, #8a8a8a 50%);

    display:inline-block;
    padding:0.75em 2.0em;
    font-size:18px;
    text-align:center;
    margin:0.25em 0;
    color:#ffffff;
    font-weight:normal;
    font-family:sans-serif;
}

Answer 1

两个颜色停止点（如49.5％和50.5％）之间的差距很小。

Answer 2

您可以在此处尝试此风格：https://jsfiddle.net/dnn02d64/4/

.btn {
    background:#8a8a8a;
    background: linear-gradient(to right bottom, #000000 49.99%, #8a8a8a 50.99%);

    display:inline-block;
    padding:0.75em 2.0em;
    font-size:18px;
    text-align:center;
    margin:0.25em 0;
    color:#ffffff;
    font-weight:normal;
    font-family:sans-serif;
}