Earlier in this article, “The Cliche of CSS Triangles,” I introduced 6 ways to use CSS to implement triangles.

But one very important scenario is missing. How do you implement rounded triangles using pure CSS? , like this:

This article will introduce several implementations of triangles with rounded corners.

Method 1. Fully compatible SVG method

The least amount of code and best way to generate a rounded triangle is to use SVG generation.

Use SVG’s polygon tag to generate a trigon, and use SVG’s stroke-linejoin=”round” to generate rounded corners at the join.

The amount of code is very small, the core code is as follows:

<svg  width="250" height="250" viewBox="- 50 to 50, 300, 300">
  <polygon class="triangle" stroke-linejoin="round" points="100, 0, 0200, 200200"/>
</svg>
Copy the code
.triangle {
    fill: #0f0;
    stroke: #0f0;
    stroke-width: 10;
}
Copy the code

The actual graph is as follows:

Here, the rounded corners are generated using the stroke-lineJoin: Round attribute of an SVG polygon. What is stroke-lineJoin? It is used to control between two stroke segments and has three optional values:

  • miterIs the default value for using a square brush to form a sharp Angle at the join
  • roundIt means to connect with rounded corners to achieve smooth effect
  • bevelThe joint will form a miter

We actually generated rounded triangles from a polygon with borders of type stroke-linejoin: round.

If we separate the background color from the border color, it actually looks like this:

.triangle {
    fill: #0f0;
    stroke: # 000;
    stroke-width: 10;
}
Copy the code

Control the rounded corners by stroke-width

So how to control the size of rounded corners? Also very simple, you can change the size of rounded corners by controlling the size of stroke-width.

Of course, to keep the triangle size consistent, we need to reduce/increase the width/height of the graph while increasing/decreasing the stroke-width:

For the full DEMO you can poke here: CodePen DEMO – Using SVG to implement rounded triangles

Method 2. Graphic splicing

However, as mentioned above, we use pure CSS to implement rounded triangles, but the first method above is actually SVG. So is there a way to just use CSS?

Of course, divergent thinking, CSS is interesting here, with a graph, can have a lot of clever solutions!

Let’s see, a rounded triangle can actually be broken into parts:

So, in fact, we only need to be able to draw a diamond with rounded corners like this, and we can get a rounded triangle by rotating and superimposing three of them:

Draw a diamond with rounded corners

So, our next goal is to draw a diamond with rounded corners. There are many ways to draw a diamond, and this article gives one of them:

  1. First turn a square into a diamondtransformThere is a fixed formula:

<div></div>
Copy the code
div {
    width:  10em;
    height: 10em;
    transform: rotate(-60deg) skewX(-30deg) scale(1.0.866);
}
Copy the code

  1. Round one of the corners:
div {
    width:  10em;
    height: 10em;
    transform: rotate(-60deg) skewX(-30deg) scale(1.0.866);
  + border-top-right-radius: 30%;
}
Copy the code

At this point, we have a smooth diamond with rounded corners!

Join 3 diamond shapes with rounded corners

Next is very simple, we just need to use the other two pseudo-elements of the element, regenerate into two rhombus with rounded corners, a total of 3 graphics rotation displacement can be joined together!

The complete code is as follows:

<div></div>
Copy the code
div{
    position: relative;
    background-color: orange;
}
div:before,
div:after {
    content: ' ';
    position: absolute;
    background-color: inherit;
}
div.div:before,
div:after {
    width:  10em;
    height: 10em;
    border-top-right-radius: 30%;
}
div {
    transform: rotate(-60deg) skewX(-30deg) scale(1.866);
}
div:before {
    transform: rotate(-135deg) skewX(-45deg) scale(1.414.707) translate(0, -50%);
}
div:after {
    transform: rotate(135deg) skewY(-45deg) scale(.707.1.414) translate(50%);
}
Copy the code

You get a rounded triangle! The effect is as follows:

CodePen Demo — A Triangle with Rounded rounded

Method three. Graphic splicing to achieve asymptotic rounded triangle

Have you finished? No!

The above scheme, although not too complicated, but there is a point is not too perfect. It just doesn’t support asymptotic rounded triangles. Something like this:

If you want to implement asymptotic rounded triangles, it’s a little more complicated. How to make 3-corner-Rounded triangle in CSS

Again, we use multiple pieces for stitching, but this time our basic graphics are going to be very complicated.

First, we need to implement such a container outer frame, similar to the above method, can be understood as a rounded diamond (draw the border for easy understanding) :

<div></div>
Copy the code
div {
    width: 200px;
    height: 200px;
    transform: rotate(30deg) skewY(30deg) scaleX(0.866);
    border: 1px solid # 000;
    border-radius: 20%;
}
Copy the code

Next, we also use two pseudo-elements to implement two slightly weird shapes for stitching together, which is a collection of various uses of transform:

div::before.div::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
}
div::before {
    border-radius: 20% 20% 20% 55%;
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(0.866) translateX(-24%);
    background: red;
}
div::after {
    border-radius: 20% 20% 55% 20%;
    background: blue;
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(0.866) translateX(24%);
}
Copy the code

To make it easier to understand, a simple transform animation was made:

The essence is to implement a graph like this:

Finally, add overflow: hidden to the parent element and remove the parent element’s border to get a rounded triangle:

Due to the special structure of the overlapping space of these two elements, at this point, adding the same gradient to the two pseudo-elements will be perfectly superimposed together:

div::before.div::after, {
    background: linear-gradient(#0f0.#03a9f4);
}
Copy the code

The result is a gradient rounded triangle:

CodePen Demo — A Triangle with Rounded and Gradient Background

The last

This article introduces several ways to implement rounded triangles in CSS. Although some of them are tedious, they also reflect the “fun and torture” side of CSS. When using specific applications, you still need to think about whether to use the above methods or not.

Well, the end of this article, I hope to help you 🙂

Want to Get the most interesting CSS information, do not miss my public account – iCSS front-end interesting news 😄

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.