Search code examples
cssborderlineshapescss-shapes

Vertical line with pointed bottom end in CSS


Just a quick question:

How can I create this vertical shape in CSS?

This is going to be a left border of a div.

Many thanks!

UPDATE The main issue is with the bottom part of the line.

enter image description here


Solution

  • Try this trick with borders:

    div {
      border-left:20px solid orange;
      border-bottom:20px solid transparent;
      width:0;
      height:300px;
    }
    

    Fiddle