<div class="stripes"></div>
<div class="stripes stripes--thin"></div>
<div class="stripes stripes--red-white"></div>

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}

.stripes {
  --angle: 45deg; // variable de inclinación
  --color-primary: black; // color inicial
  --color-secondary: #ffeb3b; // color secundario
  --breakpoint-primary: 0 15px; // puntos de corte inicial
  --breakpoint-secondary: 15px 30px; // puntos de corte secundario
  
  width: 200px;
  height: 100px;
  border: 2px solid orange;
  margin-right: 1em;
  
  background: repeating-linear-gradient(
    var(--angle), // 45deg
    var(--color-primary) var(--breakpoint-primary), // black 0 15px
    var(--color-secondary) var(--breakpoint-secondary), // #ffeb3b 15px 30px
  );
}

.stripes:last-child {
  margin-right: 0;
}

.stripes--thin {
  --breakpoint-primary: 0 5px;
  --breakpoint-secondary: 5px 10px;
}

.stripes--red-white {
  --color-primary: red;
  --color-secondary: white;
}