[英]how to add gradient to borders
我想知道是否可以将渐变添加到边框顶部而不影响边框右边界或边框左边,在这种情况下是透明的。 我尝试添加渐变颜色但它会影响边框左边框和右边框我试图让边框左边框和边框右边透明
#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/
请看: http : //css-tricks.com/examples/GradientBorder/
在我的职业生涯中对我来说已经足够了。
例如:
#borderone:first-child:before {
content:'';
position:absolute;
width:100%;
height:4px;
background:linear-gradient(to left, #354658, #9EBBDA);
top:-33px;
left:-5;
}
对于您的情况,您应该同时使用before
& first-child
伪选择器CSS。
top(in pseudo selector) = -border height = -33 px
FIDDLE: http : //jsfiddle.net/abdennour/EHELN/2/
您可以使用渐变背景和左右两个伪元素来获得此效果,以获得倾斜角
.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%;
}
http://www.colorzilla.com/gradient-editor/
这是针对背景而不是边框,但您可以使用此工具创建相同的效果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.