console
<div class="check-box"></div>
.check-box {
width: 297px;
height: 140px;
display: flex;
border: 2px solid red;
justify-content: center;
align-items: center;
background: rgba(9, 22, 32, 0.6);
border-width: 1px;
border-style: solid;
-o-border-image: linear-gradient(
0deg,
rgba(0, 174, 255, 0.2),
rgba(0, 174, 255, 0.2),
rgba(0, 174, 255, 0.2)
)
10 10;
border-image: -webkit-gradient(
linear,
left bottom,
left top,
from(rgba(0, 174, 255, 0.2)),
color-stop(rgba(0, 174, 255, 0.2)),
to(rgba(0, 174, 255, 0.2))
)
10 10;
border-image: linear-gradient(
0deg,
rgba(0, 174, 255, 0.2),
rgba(0, 174, 255, 0.2),
rgba(0, 174, 255, 0.2)
)
10 10;
position: fixed;
bottom: 25px;
left: 1980px;
}
.check-box::before {
position: absolute;
left: 0px;
top: 0;
content: "";
width: 100%;
height: 1px;
background: -webkit-gradient(
linear,
left top,
right top,
from(rgba(22, 205, 192, 0)),
color-stop(#03acde),
to(rgba(22, 205, 192, 0))
);
background: linear-gradient(
to right,
rgba(22, 205, 192, 0),
#03acde,
rgba(22, 205, 192, 0)
);
}
.check-box::after {
position: absolute;
left: 0px;
bottom: 0;
content: "";
width: 100%;
height: 1px;
background: -webkit-gradient(
linear,
left top,
right top,
from(rgba(22, 205, 192, 0)),
color-stop(#03acde),
to(rgba(22, 205, 192, 0))
);
background: linear-gradient(
to right,
rgba(22, 205, 192, 0),
#03acde,
rgba(22, 205, 192, 0)
);
}