Html – How to create a triangle from DIV


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 triangle 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 does not 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..?

Best Solution

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;

How this is works explained much more clearly here