Stripes on background: some stripes must be transparent

Question

I need to replicate this:

Base in this other question, I've tweaked this code, but my results are not good:

.expandiendo_la_palabra_stripes {
  height: 200px;
  width: 200px;
  background-image: linear-gradient(-45deg, white 25%, transparent 25%, transparent 50%, white 50%, rgb(14, 204, 93) 75%, transparent 75%, #fff);
  background-size: 10px 10px;
}

HTML:

<div class="row">
  <div class="col-md-4 monserrat">
    <span class="size40">ELIM
    ONLINE</span>
  </div>
  <div class="col-md-8 expandiendo_la_palabra_stripes">
    <div class="expandiendo_la_palabra align-middle" style="padding-left: 15%; margin-top: 12%;" >
    <span class="text-white" style="padding-top: 12%; position: relative; top: 0.35em;"> EXPANDIENDO LA PALABRA DE DIOS A TODO EL MUNDO.</span>
  </div>
  </div>
</div>

score 3 · Accepted Answer · answered May 09 '20 at 19:04

You will need different gradient to simulate this random background:

.box {
  height:100px;
  border:1px solid;
  background:
    repeating-linear-gradient(-45deg,transparent 0 100px,green 100px 102px) 0 0,
    repeating-linear-gradient(-45deg,transparent 0 140px,green 140px 142px) 0 0/100% 80%,
    repeating-linear-gradient(-45deg,transparent 0 120px,green 120px 122px) 40px 10%/100% 50%;
  background-repeat:no-repeat;
}

<div class="box"></div>

Stripes on background: some stripes must be transparent

1 Answers1