How to make a triangle in CSS

Learn how to make a triangle in CSS with an example. Easily create shapes and visuals with CSS properties like border, width & height.

Making a Triangle in CSS

The basic CSS triangle can be created using the border property on a div element. The div element needs to have a width and height of 0, and then the border property can be used to create the triangle. By setting the width and height of the div to 0, the border will be the only visible element.

div {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #000;
}

The code above will create a triangle with a width of 100px and a height of 100px. The border-left and border-right properties are set to 50px to create the triangle shape. The border-bottom is set to 100px and a colour of #000 (black). This will create a black triangle with a width of 100px and a height of 100px.

You can also create triangles using the :before and :after pseudo-elements. This is useful when you need to create a triangle with a transparent background. The :before and :after pseudo-elements can be used to create a triangle without setting a colour for the triangle.

div {
    position: relative;
    width: 0;
    height: 0;
}
div:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #000;
}

The code above will create the same triangle as the first example, but with a transparent background. You can use the :before and :after pseudo-elements to create any shape you like, including circles, triangles, and rectangles.

You can also create triangles using the clip-path property. This is useful when you need to create a triangle with a transparent background and you don’t want to use the :before and :after pseudo-elements. The clip-path property can be used to create a triangle without setting a colour for the triangle.

div {
    width: 100px;
    height: 100px;
    clip-path: polygon(0 0, 50% 0, 0 100%);
}

The code above will create a triangle with a width of 100px and a height of 100px. The clip-path property is used to create the triangle shape. The three points (0 0, 50% 0, 0 100%) are the coordinates of the triangle corners.

You can also create a triangle using the transform property. The transform property can be used to rotate a div element to create a triangle. You can use the rotate() function to rotate the div element and create a triangle.

div {
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
}

The code above will create a triangle with a width of 100px and a height of 100px. The transform property is used to rotate the div element 45 degrees and create the triangle shape.

These are just a few of the ways you can create a triangle in CSS. You can use the techniques discussed above to create any shape you like, including circles, triangles, and rectangles.