Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
triangle

How to create a triangle in CSS

Educative Answers Team

Triangles are commonly drawn with the border property. Let’s see the process of coming up with a basic triangle.

Steps to create a basic triangle

  1. Draw a simple square with a big border.
  1. Reduce the square size to zero, leaving only the border behind.
  1. ​Now divide the border into 4 segments:

    • border-top
    • border-bottom
    • border-left
    • border-right
  2. Let’s give them different colors for now.

Four triangles can be clearly seen now.
  1. To extract a single triangle out of it:

    • Delete the opposite triangle.
    • Set the adjacent triangles to transparent.

    For example, to retrieve the bottom triangle, delete the top triangle, and set the left and right triangles to transparent.

Make sure to play around with different dimensions to explore how you can manipulate the size and shape of the triangle.
  1. Note that you can directly get 4 different right-angled triangles by picking up 2 triangles, rather than just 1, from the original 4.

RELATED TAGS

css
triangle
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring