html – 如何向边框添加渐变

发布时间：2020-12-14 23:24:48 所属栏目：资源来源：网络整理

导读：我想知道是否可以将渐变添加到边框顶部而不影响边框右边界或边框左边,在这种情况下是透明的.我尝试添加渐变颜色但它会影响边框左边框和右边框我试图让边框左边框和边框右边透明 #borderone { border-top: 33px solid #354658; border-left: 33px solid trans

我想知道是否可以将渐变添加到边框顶部而不影响边框右边界或边框左边,在这种情况下是透明的.我尝试添加渐变颜色但它会影响边框左边框和右边框我试图让边框左边框和边框右边透明

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

解决方法

您可以使用渐变背景和左右两个伪元素来获得此效果,以获得倾斜角

.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,blue 50%);
    left: 100%;
}

demo

看起来我很想念这个方向.试试这个以另一种方式(对于webkit)

.test {
    border-left: 33px solid transparent;
    border-right: 33px solid transparent;
    height: 33px;
    background: linear-gradient(0deg,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,transparent 32px);
    left: 100%;
}

demo 2

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!