Take the 2-minute tour ×

I Have a DIV in HTML with some text written in it.The div is created by setting its X, Y coordinates and Height and Width. I want to draw a triange Superimposing that DIV so that my content is not lost. I cannot change the X,Y coordinates as my other div's positioning is based on this DIV. Generating a Triangle using multiple DIV's approach also doesnot seem feasible as I am not sure in which Div I will write my text then......

Can somebody suggest an idea on how I can do this..?

share|improve this question
add comment

3 Answers

You can do this with an image, but a more interesting way is to mess around with the borders of a div to make a triangle.

.triangle {
     font-size: 0px; 
     line-height: 0%; 
     width: 0px;
     border-bottom: 20px solid #000;
     border-left: 10px solid #000;
     border-right: 10px solid #000;

The way this works explained much more clearly than I have time to here:


share|improve this answer
add comment

With a background image? With SVG? With an AJAX-style JavaScript library? With a magic marker?

It's hard to say what the best answer would be without more information about what you are trying to accomplish.

share|improve this answer
add comment

Use this code for developing triangle:

        <style type="text/css">
            .triangle {
                border-bottom:120px solid red; 
                border-left:60px solid white; 
                border-right:60px solid white;
        <div class="triangle"></div>

Best of luck Prachi :)

share|improve this answer
add comment

Your Answer

