How do I draw a line in CSS that starts wide and ends in a point

Question

I hate drawing boring straight lines. How would I draw a line that starts wide and ends narrow using html/css similar to the one shown in this image.

In my opinion, that looks more like a compressed right-angle triangle (albeit tilted a bit). So you should be able to achieve that by creating a triangle (there are umpteen examples of that) and then rotating/skewing a bit. — Harry, Feb 19 '16 at 15:10

score 2 · Accepted Answer · answered Feb 19 '16 at 15:24

2

Here's an example of what Harry mentioned

.triangle{
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-right:300px solid red;
}

<div class="triangle"></div>

answered Feb 19 '16 at 15:24

Joey M-H

1 Answers1