Is there a way to make a triangular HR?

Question

Is there a way to make an HR that's basically a left to right triangle? So, you might have a 7 px base on the left, but it narrows to 1 px (centered vertically) on the right?

I've tried doing this with linear-gradients, but I can't get it to do 2 two-dimensional gradients.

Perhaps this might help https://css-tricks.com/snippets/css/css-triangle/ — Ed Heal, Aug 13 '18 at 21:20
this will probably help https://stackoverflow.com/questions/7073484/how-do-css-triangles-work/49696143#49696143 ? — Temani Afif, Aug 13 '18 at 21:20

score 1 · Answer 1 · answered Aug 13 '18 at 22:09

1

You should be able to do this using clip-path.

hr {
  height: 7px;
  width: 100%;
  background: black;
  border: 0;
  clip-path: polygon(100% 50%, 0 0, 0 100%);
}

<hr />

See clipath on MDN Web Docs

answered Aug 13 '18 at 22:09

FranCarstens

1,203
8
13

Is there a way to make a triangular HR?

1 Answers1