CSS How to Cut a Triangular Area from a Div Using CSS

In this article, we’ll learn how to cut a triangular area from a Div using CSS. While triangles are commonly used in web development as indicators, arrows, or background decorations, there’s no direct CSS property or method to create a completely triangular area. However, we can achieve this goal by utilizing CSS properties like border and size, along with a few tricks.

Read more: CSS Tutorial

Creating a Triangle Using Border and Size Properties

A simple way to create a triangle is to use the CSS border property. We can create a shape with only three borders by setting an element’s width and height to 0 and then setting the width and color of one or more borders. By setting the border width, we can control the size of the triangle.

Here’s an example showing how to use the border properties to create a triangle with a lower right corner:

.triangle {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
} 

In the example above, we create an element with no width and height by setting the width and height properties to 0. Then, by setting the border-bottom property to 100px and specifying a red color, we create a red triangle with a 100px bottom border. Furthermore, by setting the border-left property to 100px and specifying a transparent color, we create a 100px transparent portion on the left, making the triangle sharp.

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

The above example creates a div element with a red triangle in the lower right corner.

Creating a Triangle Using Pseudo-Elements

In addition to using border properties, we can also use CSS pseudo-elements to create a triangle. By applying styles to the ::after or ::before pseudo-elements of an element, we can draw a triangular shape.

Here’s an example demonstrating how to use pseudo-elements to create an upward-pointing triangle:

.triangle::after {
content: "";
display: block;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid blue;
}

In the example above, we create the triangle by applying styles to the ::after pseudo-element of the .triangle element. We use content: "" to create empty content so that the ::after pseudo-element can be displayed, and set display: block to ensure the pseudo-element displays correctly.

By setting the width and height properties to 0, we create an element with no width and height. Then, by setting the width of border-left and border-right to 50px and setting a transparent color, we create two oblique sides, turning the element into a right triangle. Finally, by setting the width of border-bottom to 50px and setting its color to blue, we create a blue triangle with a 50px bottom.

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

The above example creates a div element with a blue triangle pointing upward.

Using the Transform Property to Distort a Rectangle into a Triangle

In addition to using borders and pseudo-elements, we can also use CSS transform properties, such as transform, to distort a rectangle into an elongated triangle.

Here’s an example showing how to use the transform property to create a left-pointing arrow shape:

.triangle {
width: 100px;
height: 100px;
background-color: green;
transform-origin: top right;
transform: skewY(-45deg);
}

In the example above, we create a rectangle by setting the width and height properties and setting the background-color to green. Then, by setting the transform-origin to top right, the center of the transformation is placed at the top-right corner of the rectangle. By setting transform: skewY(-45deg), we rotate the rectangle 45 degrees counterclockwise around its top-right corner and skew it 45 degrees on the X axis, making the right edge of the rectangle thinner and forming a left-pointing arrow shape.

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

The above example creates a green rectangle with a left-pointing arrow.

Summary

In this article, we introduced how to use CSS border and size properties, pseudo-elements, and transform properties to clip a triangular area within a div. By mastering these techniques, we can easily create a variety of shapes and decorative effects, thereby enhancing our web design capabilities. I hope these techniques are helpful in your CSS development work.