How do CSS triangles work

0 votes

There're plenty of different CSS shapes over at CSS Tricks - Shapes of CSS and I'm particularly puzzled with a triangle:

CSS Triangle

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
<div id="triangle-up"></div>

How and why does it work?

Jul 4 in CSS by Edureka
• 9,760 points
9 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In CSS

0 votes
0 answers

How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?

A common trick for vertical positioning elements ...READ MORE

Jul 18 in CSS by Edureka
• 9,760 points
10 views
0 votes
1 answer

How do I give text or an image a transparent background using CSS?

Use either a semi-transparent PNG or SVG ...READ MORE

answered May 27 in CSS by Edureka
• 9,540 points
31 views
0 votes
1 answer

How do I center this form in css?

You can try form { ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
26 views
0 votes
1 answer
0 votes
0 answers

How do I rotate text in css?

How can I rotate text using CSS ...READ MORE

Jun 30 in CSS by Edureka
• 9,760 points
20 views
0 votes
0 answers

How does the CSS Block Formatting Context work?

How does the CSS Block Formatting Context ...READ MORE

Jul 5 in CSS by Edureka
• 9,760 points
6 views
0 votes
1 answer

How to build a special polygon (a kite shape) with HTML & CSS only?

I made two divs, one for Arc ...READ MORE

answered May 28 in CSS by Edureka
• 9,540 points
67 views
0 votes
1 answer

html/css hexagon with image inside

The CSS3 clip-path feature is a novel ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
105 views
0 votes
1 answer

How to add border in my clip-path: polygon(); CSS style

Using an SVG Dilation Filter to Add ...READ MORE

answered Jun 21 in CSS by Edureka
• 9,540 points
102 views
0 votes
1 answer

Double arc shape with CSS jquery or javascript

But for this shape I would use ...READ MORE

answered Jun 14 in JQuery by gaurav
• 17,000 points
31 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP