How Can I Create a Three-Corner-Rounded Triangle Using Only CSS?

Creating a Three-Corner-Rounded Triangle in CSS

Creating custom shapes using CSS without JavaScript can be a challenge, especially when aiming for pixel-perfect precision. One common task is creating a three-corner-rounded triangle, which can be approached using various techniques.

CSS-Only Solution:

To achieve a three-corner-rounded triangle using pure CSS, consider the following solution:

.triangle {
  position: relative;
  background-color: orange;
  text-align: left;
}

.triangle:before,
.triangle:after {
  content: '';
  position: absolute;
  background-color: inherit;
}

.triangle,
.triangle:before,
.triangle:after {
  width: 10em;
  height: 10em;
  border-top-right-radius: 30%;
}

.triangle {
  transform: rotate(-60deg) skewX(-30deg) scale(1, .866);
}

.triangle:before {
  transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);
}

.triangle:after {
  transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
}

This method uses CSS transforms, skew, and scaling to create the desired shape. It offers pixel-perfect precision and is relatively intuitive to understand.

The above is the detailed content of How Can I Create a Three-Corner-Rounded Triangle Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!