Stripe background - Fondo de rayas CSS3

En este Tutoriales En Linea les traemos este truco de efecto que permite una barra de progreso en rayas (progress bar) y tarjetas irregulares (Irregular card) en CSS3·...

El degradado lineal linear-gradient es un módulo muy importante de CSS3, pero en el desarrollo real, no se utilizan comúnmente. Aquí, daré dos escenarios que uso a menudo, a saber progress bar y Irregular card.

Barra de progreso

<style>
  main {
    width: 100%;
    padding: 80px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; 
  }
  .progress-outer {
    width: 60%; height: 12px;
    border-radius: 8px;
    overflow: hidden;
    position: relative; 
  }    
  .progress-enter {  
    height: inherit;
    background: rgba(180, 160, 120, .2); 
  }
  .progress-bg {
    width: 60%; height: inherit;
    border-radius: 6px; 
    background: repeating-linear-gradient(-45deg, #D9CFBB  25%, #C3B393 0, #C3B393 50%,
                    #D9CFBB 0, #D9CFBB 75%, #C3B393 0);
    background-size: 16px 16px;
    animation: panoramic 20s linear infinite;
  }
  @keyframes panoramic{
    to {
      background-position: 200% 0;
    }
  }
</style>

<main>
    <div class="progress-outer">  <!--better extension-->
      <div class="progress-enter">
        <div class="progress-bg"></div>
      </div>
      <!-- <span>60%</span> -->
    </div>
</main>

Ver resultado

Tarjeta irregular

<style>
  main {
    width: 100%;
    padding: 80px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; 
  }
  .coupon-card {
    width: 200px;
    height: 120px;
    background-image: radial-gradient(circle at 100px -8px, transparent 20px, #b4a078 21px);
  }
</style>

<main>
    <div class="coupon-card"></div>
</main>

Ver resultado
En el ejemplo anterior, para lograr: una sombra del efecto de efecto añadido cuando se desplaza, por lo que aplicamos el radial-gradient. Si tiene mejor propuesta, bienvenido a dejar un mensaje...

Recomendación

Sec CSS Secrets》 el autor Lea Verou usa el gradiente CSS3 para implementar la galería de patrones de la biblioteca de patrones, y su galería SVG de patrones de SVG , si está interesado, sería muy útil investigar el principio de implementación del autor.