How to Create a Rounded-Corner Triangle using Only HTML and CSS?

How to create a triangle with three rounded corners using HTML and CSS

To create a triangle with three rounded corners without using JavaScript, you can employ CSS transformations and rotate, skew, and scale an HTML div element.

Here's a sample HTML and CSS code that you can use:

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

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

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

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

This code will create a triangle with rounded corners that will scale and maintain its shape perfectly at any size. It uses simpler math than the original solution and provides an intuitive approach to creating the desired effect.

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