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

Achieving Three-Cornered Rounded Triangles with CSS

In this article, we'll tackle the challenge of creating custom-colored three-cornered rounded triangles using pure CSS, without JavaScript or HTML5 canvas support.

Problem Statement

The goal is to create a shape like the one shown below without resorting to image overlays or JS-based techniques.

[Image of three-cornered rounded triangle]

Solution

Here's an elegant CSS solution inspired by the author's original idea:

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

Explanation

This solution combines multiple CSS transformations to achieve the desired shape:

• .triangle: Defines the base triangle and sets its background color.
• .triangle:before, .triangle:after: Two pseudo-elements added for the additional corners.
• Percentage-based Dimensions: All elements have a width and height of 10em to ensure it scales equally at any size.
• Border-top-right-radius: Sets the radius of the top right corner, creating the rounded effect.
• Transformations: A series of rotations, skews, and scales are applied to rotate the triangle and adjust its oval shape. The specific values may need slight adjustments depending on the desired aspect ratio.

The final result is a pixel-perfect three-cornered rounded triangle, crafted entirely with CSS.

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