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!
You can use multiple background:
Or adjust your code like below, you are simply missing the slice property:
Related for more details: border-image-slice for gradient border image