Why Are My CSS Pseudo-Element Triangles Distorted, and How Can I Fix Them?

Triangle with CSS Pseudo Elements: Troubleshooting and Alternative Solution

In an attempt to create a triangle shape using pseudo elements, a user encountered an unexpected result, leading to a distorted triangle. The issue stems from the use of borders. To understand why, refer to this comprehensive explanation: How do CSS triangles work?

To address this, an alternative approach is to leverage rotation and borders:

.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);
}

This alternative utilizes border properties to create the triangle shape and positions it using translation. Additionally, it incorporates rotation to achieve the desired angle.

The above is the detailed content of Why Are My CSS Pseudo-Element Triangles Distorted, and How Can I Fix Them?. For more information, please follow other related articles on the PHP Chinese website!