CODEWITHSUNDEEP
html
Prachi
Prachi

Reputation:

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..?

Upvotes: 0

Views: 20035

Answers (2)

Touhid Rahman
Touhid Rahman

Reputation: 2583

Use this code for developing triangle:

CSS

.triangle {
    width:0; 
    border-bottom:120px solid red; 
    border-left:60px solid white; 
    border-right:60px solid white;
}

HTML

<div class="triangle"></div>

Upvotes: 0

SpaceBeers
SpaceBeers

Reputation: 13947

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

Upvotes: 8

Related Questions