Trusted answers to developer questions

How to create a triangle in CSS

Get the Learn to Code Starter Pack

Break into tech with the logic & computer science skills you’d learn in a bootcamp or university — at a fraction of the cost. Educative's hand-on curriculum is perfect for new learners hoping to launch a career.

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 ©2024 Educative, Inc. All rights reserved
Did you find this helpful?