CODEWITHSUNDEEP
htmlcss
Chaddly
Chaddly

Reputation: 267

How do i draw and position a triangle?

In my jsFiddle I cannot get my triangle to appear correctly. It either goes above my text container or behind the background container. How do I get it to stay comfortably in the middle?

<div class="container">
<div class="firefighter-link">
    Program Overview
</div>
<div class="firefighter-current-page">
    Program Overview
    <div class="firefighter-current-page-corner"></div>
</div>
</div>

Here is a picture of what i'm trying to do. The bottom "triangle" represents the page you are currently on. enter image description here

Upvotes: 2

Views: 103

Answers (2)

Adam Jenkins
Adam Jenkins

Reputation: 55792

You shouldn't be using a square and rotating it, you should be using a triangle.

Try creating a div with a 0 width and 0 height and give it an 8px border. Then, make all borders transparent except for one (in your case your top border) and you'll end up with a triangle.

EDIT:

Sorry, forgot to save my fiddle:

http://jsfiddle.net/ndudD/

div { width:0; height:0; border: 8px solid transparent; border-top-color: #000; }

Upvotes: 4

Decor
Decor

Reputation: 558

As Adam says, the best practice is to use a triangle. 

.triangle{
    width:0;
    height:0;
    border-top: 50px solid blue;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

Very helpful screencast on css triangles:

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-drawing-and-using-css-triangles/

Upvotes: 0

Related Questions