30-seconds-of-code/snippets/triangle.md

title, tags, expertise, cover, firstSeen, lastUpdated

title	tags	expertise	cover	firstSeen	lastUpdated
Triangle	visual	beginner	blog_images/yellow-white-mug-1.jpg	2018-02-25T15:14:39+02:00	2021-10-13T19:29:39+02:00

Creates a triangular shape with pure CSS.

• Use three borders to create a triangle shape.
• All borders should have the same border-width (20px).
• The opposite side of where the triangle points towards (i.e. top if the triangle points downwards) should have the desired border-color. The adjacent borders (i.e. left and right) should have a border-color of transparent.
• Altering the border-width values will change the proportions of the triangle.

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

.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid #9C27B0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}