html怎样设置渐变效果图,html – 如何向边框添加渐变

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

.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%;

}

看起来我很想念这个方向.试试这个以另一种方式(对于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%;

}