How to make Stripe only with CSS?

Asked

Viewed 82 times

5

How can I make one Stripe (diagonally striped) with CSS only?

The image below illustrates my question better.

inserir a descrição da imagem aqui

css

1 answer

5


You can use the repeating-linear-gradient for that reason.

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>

Don’t forget to see compatibility table.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.