How to use repeating gradient to create a square?

HTML-CSS
#21

How would I turn it into this?

#22

I think you know the answer!

#23

I really don’t.

What would I do?
https://jsfiddle.net/7m4wu6h0/

.box,
.box:before {
  width: 170px;
  height: 170px;
  display: block;
  background: #000;
}
.box:before {
  content: "";
  background: repeating-linear-gradient(
    teal 0 5px,
    black 5px 10px,
    orange 10px 15px,
    black 15px 20px
  );
}
#24

I know you KNOW the answer.
i cannot help you any further on this problem because you know the answer.

#25

I really don’t though, why are you saying I do when I don’t, and that’s what I have been having trouble figuring out how to do.

#26

asking problems is fine.
but don’t expect anyone to solve them for you.
you have to solve your own problems.
this is a part of being an programmer.
any senior would tell you the same.

why don’t you use the same code.

#27

Doing it the other way I would be using less code, and it’s more simple. But I can’t figure out how to do it.

#28

this link might help you.
Background Patterns, Simplified by Conic Gradients

i would be waiting to see more people offer their opinion on this topic.

#29

I would be using conic, not linear to do this?

#30

that’s just a one way. depends on you.
read

they reduced the code needed to get pyramid pattern by more than half.

#31

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.