CSS whimsy | cleverly implement triangles with rounded corners

Previously in this article- "Triangular Triangle by CSS" , introduced 6 ways to use CSS to implement triangles.

But a very important scene is How does 160ee4c3cdc1ae use pure CSS to implement a triangle with rounded corners? , like this:

This article will introduce several ways to realize triangles with rounded corners.

Method 1. Fully compatible SVG Dafa

If you want to generate a triangle with rounded corners, the code is at least , and the best way is to use SVG to generate it.

Use SVG's polygon tag <polygon> generate a triangle, and use SVG's stroke-linejoin="round" generate rounded corners at the connection.

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

<svg  width="250" height="250" viewBox="-50 -50 300 300">
  <polygon class="triangle" stroke-linejoin="round" points="100,0 0,200 200,200"/>
</svg>

.triangle {
    fill: #0f0;
    stroke: #0f0;
    stroke-width: 10;
}

The actual graphics are as follows:

Here, it is actually the rounded corners generated stroke-linejoin: round attribute of the SVG polygon. What is stroke-linejoin It is used to control between two stroked line segments, there are three optional values:

• miter is the default value, which means that a square brush is used to form sharp corners at the joints
• round means to connect with rounded corners to achieve a smooth effect
• bevel will form a miter at the junction

We actually stroke-linejoin: round to generate a rounded triangle through a polygon with a border and the border connection type is .

If we distinguish the background color from the border color, it is actually like this:

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

Control the size of the rounded corners by stroke-width

So how to control the size of the fillet? It is also very simple. By controlling stroke-width , the size of the rounded corners can be changed.

Of course, to keep the triangle size the same, while increasing/decreasing stroke-width , you need to decrease/increase the width / height :

The complete DEMO you can here: 160ee4c3cdc4e4 CodePen Demo - Use SVG to achieve a triangle with rounded corners

Method two. Graphic splicing

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

Of course, divergent thinking, the interesting part of CSS is here. With a graphic, there can be many clever solutions!

Let's take a look, a rounded triangle, it can actually be split into several parts:

So, in fact, we only need to be able to draw such a rhombus with rounded corners, and rotate and superimpose three of them to get a rounded triangle:

Draw a rhombus with rounded corners

Then, our goal then becomes to draw a rhombus with rounded corners. There are many ways. This article gives one of them:

1. First turn a square into a diamond, using transform have a fixed formula:

<div></div>

div {
    width:  10em;
    height: 10em;
    transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
}

2. Turn one of the corners into rounded corners:

   div {
    width:  10em;
    height: 10em;
    transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
     + border-top-right-radius: 30%;
   }

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

Stitch 3 diamonds with rounded corners

The next step is very simple, we only need to use the other two pseudo-elements of the element to generate 2 rhombuses with rounded corners, and splice a total of 3 graphics rotation displacements together!

The complete code is as follows:

<div></div>

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

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

here for the complete code: 160ee4c3cdc7c9 CodePen Demo - A triangle with rounded

Method 3. Graphic splicing to achieve gradient color rounded triangles

Is it finished? No!

Although the above scheme is not too complicated, one thing is not too perfect. It is the rounded triangles that cannot support gradient colors. Like this:

If you need to implement a gradient color rounded triangle, it is still a bit complicated. with it. The following method refers to - 160ee4c3cdc855 How to make 3-corner-rounded triangle in CSS .

It also uses multiple pieces for stitching, but this time our basic graphics will be very complicated.

First of all, we need to implement such a container frame, which is similar to the above method, which can be understood as a rounded diamond (drawing the border for easy understanding):

<div></div>

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

Next, we also use two pseudo-elements to realize the stitching of two slightly weird graphics, which is a collection of various usages 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%);
}

In order to facilitate understanding, a simple transformation animation is made:

The essence is to realize such a graph:

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

Due to the special structure of the overlapping space of these two elements, at this time, adding the same gradient color to the two pseudo-elements will overlap perfectly:

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

The final result is a gradient rounded triangle:

For the complete code of each of the above graphics, you can here: 160ee4c3cdc9d6 CodePen Demo - A triangle with rounded and gradient background

At last

This article introduces several ways to implement rounded triangles in CSS. Although some of them are a bit cumbersome, they also reflect the "interesting and tormenting" side of CSS. In specific applications, you still need to think about whether to use the above methods. Make a trade-off, and sometimes, cutting the picture may be a better solution.

Okay, this concludes this article, I hope it helps you :)

If you want to get the most interesting CSS information, don’t miss my account - 160ee4c3cdca1e iCSS front-end interesting 160ee4c3cdca1f 😄

More wonderful CSS technical articles are summarized in my Github - iCSS , which will be updated continuously. Welcome to click a star to subscribe to the collection.

If you have any questions or suggestions, you can exchange more, original articles, limited writing style, and lack of knowledge. If there are any irregularities in the article, please let me know.