I'm trying to set border-image
and background
properties both with the repeating-linear-gradient
option, but with different values for the same <div>
element. I don't know how to do it, because with my attempt it seems the gradients parameters are overlapped and it also seems the page takes the last values setted.
Here's the code and the output I got:
body {
margin: 0;
background:
linear-gradient(217deg, rgba(255,0,0, .8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0, .8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255, .8), rgba(0,0,255,0) 70.71%);
}
.under_banner {
width: 100%;
height: 20%;
top: 80%;
border-width: 10px 0 0 0;
border-style: solid;
border-image: repeating-linear-gradient(145deg, #ff0000, #ff9020 50%);
background: repeating-linear-gradient(130deg, #f6d808, #ffc107 10%);
text-align: center;
line-height: 10px;
position: fixed;
z-index: 1;
}
<body>
<div class="under_banner">
<p>Hello StackOverflow Community!</p>
</div>
</body>
As you can see, .under_banner
has top-border
property, in fact the repeating-linear-gradient
is not symmetric with the background
one. I'd like to get different gradients for each property just with one div, if possible.
Thank you in advance!