In this article, “The Cliche of CSS Triangles”, I showed you six 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 describes several implementations of triangles with rounded corners.

Method 1. Fully compatible SVG method

To generate a triangle with rounded corners, the least amount of code is the best way to use SVG.

Use SVG’s tag to generate a trigon, and use SVG’s strok-lineJoin =”round” to generate the 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-50 300 300"> <polygon class="triangle" strok-linejoin ="round" points="100,0 0200 200200 "/ > < / SVG >
.triangle {
    fill: #0f0;
    stroke: #0f0;
    stroke-width: 10;
}

The actual graph is as follows:

Here, we use the stroke-linejoin: round property of the SVG polygon to generate the rounded corners. What is a stroke-linejoin? It is used to control between two stroke lines. There are three optional values:

  • miterIs the default, which means to use a square brush to form a sharp corner at the junction
  • roundRepresents the connection with rounded corners to achieve a smooth effect
  • bevelThe joint will form a miter

We actually generated the rounded triangle from a polygon with a border and the border join type is 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;
}

The size of the fillet is controlled by stroke-width

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

Of course, to keep the triangle size the same, increase/decrease the width/height of the figure as well as increase/decrease the stroke-width:

The full DEMO you can stamp here: CodePen DEMO — using SVG to implement triangles with rounded corners

Method 2. Graphics Mosaic

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

Of course, divergent thinking, CSS interesting place is here, with a graph, can have very many kinds of clever solutions!

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

So, in fact, all we need to be able to do is draw a rounded diamond like this, and rotate and stack three of them to get a rounded triangle:

Draw a rhombus with rounded corners

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

  1. First, change a square into a diamond, usingtransformThere is a fixed formula:

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

  1. Rounded one of the corners:

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

So far, we smoothly get a rhombus with rounded corners!

Splice 3 rhombus with rounded corners

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

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

I have a rounded triangle! The effect is as follows:

For the complete code you can check here: CODEPEN-DEMO — A Triangle with ROUNDED

Method 3. Graph Mosaic to achieve gradient rounded triangle

Have you finished? No!

The above scheme, though not too complicated, is not perfect in one respect. Cannot support gradients for rounded triangles. Something like this:

If you need to implement gradient rounded triangle, it is a little more complicated. But there is someone else out there. Here is 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 of all, we need to implement such a container frame, which is similar to the above method, which can be understood as a rounded-corner diamond (draw the border for easy understanding) :

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

Then, we also use two pseudo elements to realize two slightly weird shapes to join 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%); }

To make it easier to understand, I made a simple transformation animation:

Essentially, it implements a graph like this:

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

Due to the special structure of the overlap space between these two elements, adding the same gradient to the two pseudo elements will perfectly stack together:

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

The result is a gradient rounded triangle:

The complete code for each of the above graphics is available here: CODEPEN DEMO — A Triangle with ROUNDING AND Gradient Background

The last

This article introduces several ways to implement triangles with rounded corners in CSS. Although some of them are tedious, they also show the “fun and tormenting” side of CSS. When it comes to specific applications, you still have to think about whether to use the above methods or not.

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

Want to Get the most interesting CSS information, do not miss my public number – ICSS front end stories 😄

More exciting CSS technical articles in my GitHub — ICSS, keep updating, welcome to click star to subscribe to the favorites.

If there are any questions or suggestions, you can communicate more, the original article, the writing is limited, the talent is shallow, if there is something wrong in the article, wang told.