html - 如何为边框添加渐变

我想知道是否有可能在不影响边框右或边框左的情况下向边框顶部添加渐变，而在这种情况下是透明的。我尝试添加渐变颜色，但会影响边框左侧和边框右侧，im试图让边框左侧和边框右侧透明

#borderone {
        border-top: 33px solid #354658;
        border-left: 33px solid transparent;
        border-right: 33px solid transparent;
        margin: 0 auto;
        min-width: 1277px;
    }
    <div id='borderone'></div>

如您所见，这是我要执行的操作，尽管我要使用渐变背景色而不是这种深蓝色http://jsfiddle.net/EHELN/

最佳答案

您可以使用背景作为渐变来获得此效果，并使用左右两个2个伪元素来获得倾斜的 Angular

 .test {
    border-left: 33px solid transparent;
    border-right: 33px solid transparent;
    height: 33px;
    background: linear-gradient(90deg, black, blue);
    margin: 0 auto;
    min-width: 42px;
    background-clip: content-box;
    position: relative;
}

.test:before, .test:after {
    content: '';
    position: absolute;
    width: 33px;
    height: 100%;
}

.test:before {
    background: linear-gradient(45deg, transparent 50%, black 50%);
    right: 100%;
}

.test:after {
    background: linear-gradient(315deg, transparent 50%, blue 50%);
    left: 100%;
}

demo

好像我误解了方向。尝试以其他方式使其适用(对于Webkit)

 .test {
    border-left: 33px solid transparent;
    border-right: 33px solid transparent;
    height: 33px;
    background: linear-gradient(0deg, black, red);
    margin: 0 auto;
    min-width: 42px;
    background-clip: content-box;
    position: relative;
}

.test:before, .test:after {
    content: '';
    position: absolute;
    width: 45px;
    height: 45px;
    bottom: 0px;
}

.test:before {
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: bottom right;
    background: linear-gradient(-45deg, black 0, red 32px, transparent 32px);
    right: 100%;
}

.test:after {
    -webkit-transform: rotate(-45deg);
    -webkit-transform-origin: bottom left;
    background: linear-gradient(45deg, black 0, red 32px, transparent 32px);
    left: 100%;
}

demo 2