How do I add color to the fence

HTML & CSS
1

I am trying to add color to the square lines that make up the fence.

The lines of the fence currently have no color, I wanted to add color to it.

Code: https://jsfiddle.net/bx3qse0z/

  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path fill="none" d="M0 0h10v10H0z"/><path d="M10 .15L5.15 5 10 9.85V10h-.13L5.01 5.14.15 10H0v-.14L4.87 5 0 .13V0h.15l4.86 4.86L9.86 0H10z"/></svg>');
}

2

I would guess that you need to add a stroke to the background svg data uri.

e.g. <path stroke="red" etc....

.curtain {
  margin: auto;
  flex: 1 0 0;
  max-width: 642px;
  box-shadow: inset 0 -2px 0px 0px #0a0a0a;
  border: 20px solid #000;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path stroke="red" fill="none" d="M0 0h10v10H0z"/><path d="M10 .15L5.15 5 10 9.85V10h-.13L5.01 5.14.15 10H0v-.14L4.87 5 0 .13V0h.15l4.86 4.86L9.86 0H10z"/></svg>');
}

if you meant the background then that would be the fill attribute (fill=“red”) instead of none.

Didn’t you draw this svg originally? Surely you remember how you did it?

3

This is a different svg.

The red aren’t the lines of the fence though.

The fence is the diamond.

4

Sorry I don’t know what you mean by fence exactly?

All I see is a rectangle of 4 20px wide black borders that have an svg background in the middle that seems to have lines and crosses. I don’t see any fence.

5

These lines:

6

Why didn’t you say first :slight_smile:

7

That’s the second path I think.
e.g. 0v10H0z"/><path stroke="red" d

.curtain {
  margin: auto;
  flex: 1 0 0;
  max-width: 642px;
  box-shadow: inset 0 -2px 0px 0px #0a0a0a;
  border: 20px solid #000;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path fill="none" d="M0 0h10v10H0z"/><path stroke="red" d="M10 .15L5.15 5 10 9.85V10h-.13L5.01 5.14.15 10H0v-.14L4.87 5 0 .13V0h.15l4.86 4.86L9.86 0H10z"/></svg>');
}

Screen Shot 2021-11-28 at 22.18.10
Screen Shot 2021-11-28 at 22.18.10776Ă—341 5.26 KB

1 Like
8

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