CODEWITHSUNDEEP
cssborderlineshapescss-shapes
Nesta
Nesta

Reputation: 1008

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

Upvotes: 2

Views: 1656

Answers (6)

Alvaro Menéndez
Alvaro Menéndez

Reputation: 9012

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/

Upvotes: 2

King King
King King

Reputation: 63327

Try this trick with borders:

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

Fiddle

Upvotes: 7

Michał Lach
Michał Lach

Reputation: 1278

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.

Upvotes: 0

Tom Fenech
Tom Fenech

Reputation: 74645

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.

Upvotes: 2

Sagi_Avinash_Varma
Sagi_Avinash_Varma

Reputation: 1509

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;
}

Upvotes: 2

haxxxton
haxxxton

Reputation: 6442

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/

Upvotes: 1

Related Questions