So I have a square div and i'm trying to get the background to basically look like this :
I've had a look around, and since this question has been asked a lot i've seen CSS gradients used.
I've been playing about and ended up with:
background-image: linear-gradient(
180deg, rgba(255, 255, 255, .2) 29%,
transparent 20%,
transparent 51%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent);
However, gradients seem to blend the colours from one to another instead of having a sharp difference like below.
What should I be doing to achieve the picture?
try this :
div#stripes {
height: 200px;
width: 200px;
background-image: linear-gradient(45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, #fff);
background-size: 50px 50px;
}
<div id="stripes">
</div>
jsfiddle
You can do like this:
background: repeating-linear-gradient(-45deg, #de9dd4, #de9dd4 5px, white 5px, white 10px);
Jsfiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With