How Can I Correctly Create Triangles Using HTML/CSS Pseudo-elements?

Creating Triangles with Pseudo Elements in HTML/CSS

When attempting to create a triangle shape using pseudo elements, some users may encounter unexpected results. This article aims to address the common issue and provide an alternative solution.

The initial code provided, which uses border properties, fails to produce the desired triangle due to the limitations of the border model. For triangles, an alternative approach is recommended.

Using Rotation and Border

To create a triangle using this method, follow these steps:

1. Define a parent element with a border to serve as the base of the triangle.
2. Create a pseudo element within the parent element and position it above and slightly to the side of the base.
3. Use the transform: rotate(45deg) property to rotate the pseudo element by 45 degrees.
4. Add borders to the pseudo element, leaving the right side clear to form the triangle's apex.

For example:

.box {
  border: 1px solid;
  margin: 50px;
  height: 50px;
  position: relative;
  background: #f2f2f5;
}

.box:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-top: 1px solid;
  border-left: 1px solid;
  top: -11px;
  left: 13px;
  background: #f2f2f5;
  transform: rotate(45deg);
}

<div class="box">

</div>

This method leverages the rotation property to create the desired triangle shape effectively.

The above is the detailed content of How Can I Correctly Create Triangles Using HTML/CSS Pseudo-elements?. For more information, please follow other related articles on the PHP Chinese website!