How to make Stripe with CSS only?

Question

How to make Stripe with CSS only?

Navigation

#1 by (5 votes)

5

How can I make a stripe (that slide diagonally) only with CSS?

The image below illustrates my question better.

css

asked by anonymous 07.02.2017 / 16:43

1 answer

Random order with Entity Framework Why use const after the function?

score 5 · Accepted Answer

You can use repeating-linear-gradient for this.

A practical example, taken from the documentation itself, would be this:

div {
  display: block;
  width: 50%;
  height: 30px;
  border-color: #000000;
  padding: 10px;
}
#grad1 {
  background-image: -moz-repeating-linear-gradient(180deg, rgb(26, 198, 204), rgb(26, 198, 204) 7%, rgb(100, 100, 100) 10%);
  background-image: -webkit-repeating-linear-gradient(180deg, rgb(26, 198, 204), rgb(26, 198, 204) 7%, rgb(100, 100, 100) 10%);
  background-image: -o-repeating-linear-gradient(180deg, rgb(26, 198, 204), rgb(26, 198, 204) 7%, rgb(100, 100, 100) 10%);
  background-image: repeating-linear-gradient(180deg, rgb(26, 198, 204), rgb(26, 198, 204) 7%, rgb(100, 100, 100) 10%);
}
#grad2 {
  background-color: black;
  background-image: -moz-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255, 255, 255, 1) 25px, rgba(255, 255, 255, 1) 50px);
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255, 255, 255, 1) 25px, rgba(255, 255, 255, 1) 50px);
  background-image: -o-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255, 255, 255, 1) 25px, rgba(255, 255, 255, 1) 50px);
  background-image: -ms-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255, 255, 255, 1) 25px, rgba(255, 255, 255, 1) 50px);
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255, 255, 255, 1) 25px, rgba(255, 255, 255, 1) 50px);
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient -->

<ol>
  <li>repeating gradient
    <div id="grad1"></div>
  </li>
  <li>Zebra pattern
    <div id="grad2"></div>
  </li>
</ol>

Do not forget to see the compatibility table.