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, 2022 in CSS by Edureka
• 13,620 points
319 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, 2022 in CSS by Edureka
• 13,620 points
748 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, 2022 in CSS by Edureka
• 12,690 points
489 views
0 votes
1 answer

How do I center this form in css?

You can try form { ...READ MORE

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
508 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, 2022 in CSS by Edureka
• 13,620 points
569 views
0 votes
0 answers

How does the CSS Block Formatting Context work?

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

Jul 5, 2022 in CSS by Edureka
• 13,620 points
308 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, 2022 in CSS by Edureka
• 12,690 points
1,254 views
0 votes
1 answer

html/css hexagon with image inside

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

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
2,040 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, 2022 in CSS by Edureka
• 12,690 points
6,484 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, 2022 in JQuery by gaurav
• 23,260 points
1,092 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP