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.