Vertical line with pointed bottom end in CSS

Question

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.

Answer 1

Try this trick with borders:

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

Fiddle

Answer 2

Working Solution: http://jsfiddle.net/avi_sagi/F25zD/

CSS Rules

div{
  height:100px;
  width:0px;
  border-left:5px solid #aa0;
  border-bottom:5px solid transparent;
}

Answer 3

With a <div> you could use this css:

div {
    height: 50px;
    width: 50px;
    border-left: 10px solid gold;
    border-bottom: 10px solid transparent;
}

Here's a fiddle

For a 45° angle on the bottom, the border-bottom must be the same as the border-left. To alter the angle, change the width of border-bottom.

Answer 4

you can try with after pseudo element but this is another way:

<div class="container">
<div class="top"></div>
<div class="line"></div>

</div>



.top {
height:20px;
background-color:#f0ae3f;
width:20px;
}
.line {
height:300px;
background-color:#f0ae3f;
width:20px;
-moz-transform: skewX(0deg) skewY(-40deg);
-webkit-transform: skewX(0deg) skewY(-40deg);
-o-transform: skewX(0deg) skewY(-40deg);
-ms-transform: skewX(0deg) skewY(-40deg);
transform: skewX(0deg) skewY(-40deg);
margin-top:-10px;
}

here you have the fiddle: http://jsfiddle.net/WgmmU/1/

Answer 5

you could have a look at doing this using the :after selector in css

HTML

<div id="vLine"></div>

CSS

#vLine{
    /* test styling */
    position:absolute;
    top:20px;
    left:100px;
    /* end test styling */
    height:100px;
    width:10px;
    background:orange;
}
#vLine:after{
    content: " ";
    top: 100%;
    border: solid transparent;
    position: absolute;
    border-width: 5px; /* half the width of your line*/
    border-top-color: orange; /* because you want to touch the top with color */
    border-left-color: orange; /* because you want to touch the left with color */
}

fiddle: http://jsfiddle.net/nQKR4/2/

Answer 6

div {
  background-color:orange;
  width:20px;
  height:300px;
 }

Best practice is not to use borders at all, because diffrent browsers render them diffrently (IE). Sometimes it may even break your layouts.