Create gradient borders with the border-image property:
border:4px solid;
border-image: linear-gradient(135deg,#FF0000 0%,... #FF00AB 100%)1;
<div class="stripe-1"></div>
<div class="stripe-1 blue-stripe-1"></div>
<div class="stripe-2"></div>
<div class="stripe-2 blue-stripe-2"></div>
<div class="stripe-1 stripe-3"></div>
<div class="stripe-1 stripe-3 blue-stripe-3"></div>
<div class="stripe-2 stripe-4"></div>
<div class="stripe-2 stripe-4 blue-stripe-4"></div>
body{background-color:#283470;}
.stripe-1{
position:absolute;
top: 10px;
left: 10px;
height: 10px;
width: 98%;
background: -webkit-linear-gradient(left,rgba(58, 32, 92,1),rgba(58, 32, 92,.0));
background: linear-gradient(90deg,rgba(58, 32, 92,1),rgba(58, 32, 92,.0));
}
.blue-stripe-1{
background: -webkit-linear-gradient(left,#17E1E3,rgba(58, 32, 92,.0));
background: linear-gradient(90deg,#17E1E3,rgba(58, 32, 92,.0));
z-index:-1;
top:20px;
height:5px;
}
.stripe-2{
position:absolute;
top:10px;
left:10px;
height: 98%;
width: 10px;
background: -webkit-linear-gradient(top,rgba(58, 32, 92,1),rgba(58, 32, 92,.0));
background: linear-gradient(180deg,rgba(58, 32, 92,1),rgba(58, 32, 92,.0));
}
.blue-stripe-2{
gradient(top,#17E1E3,rgba(58, 32, 92,.0));
background: linear-gradient(180deg,#17E1E3,rgba(58, 32, 92,.0));
z-index:-1;
left:20px;
width:5px;
}
.stripe-3{
top:auto;
bottom:10px;
right:10px;
left:auto;
background: -webkit-linear-gradient(right,rgba(58, 32, 92,1),rgba(58, 32, 92,.0));
background: linear-gradient(-90deg,rgba(58, 32, 92,1),rgba(58, 32, 92,.0));
}
.blue-stripe-3{
background: -webkit-linear-gradient(right,#17E1E3,rgba(58, 32, 92,.0));
background: linear-gradient(-90deg,#17E1E3,rgba(58, 32, 92,.0));
z-index:-1;
bottom:20px;
height:5px;
}
.stripe-4{
top:auto;
bottom:10px;
right:10px;
left:auto;
background: -webkit-linear-gradient(bottom,rgba(58, 32, 92,.0),rgba(58, 32, 92,1));
background: linear-gradient(-180deg,rgba(58, 32, 92,.0),rgba(58, 32, 92,1));
}
.blue-stripe-4{
gradient(bottom,rgba(58, 32, 92,.0),#17E1E3);
background: linear-gradient(-180deg,rgba(58, 32,92,.0),#17E1E3);
z-index:-1;
right:20px;
width:5px;
}
Top comments (0)