Today I will bring you a solution on how to implement a rounded triangle. Although this solution can be implemented, it is also achieved by means of patchwork. If you want to use a div to implement a rounded triangle, it is still relatively difficult. The previous article talked about how to implement a dialog box , which introduced the implementation of triangles. Today we will talk about how to realize a rounded triangle.
Solution 1: Fully compatible SVG solution
If you want to generate a triangle with rounded corners, the best and least amount of code is to use SVG to generate it.
Use SVG's polygon tag <polygon> to generate a trigonal shape, 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 -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;
}
Controlling the fillet size through stroke-width So how to control the fillet size? It is also very simple. By controlling the size of stroke-width, you can change the size of the fillet. Of course, to keep the size of the triangle consistent, while increasing/reducing the stroke-width, you need to reduce/increase the width/height of the graphic.
Option 2: Graphic splicing
You can use a square to turn it into a rhombus, and then add rounded corners
div {
width: 10em;
height: 10em;
transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
border-top-right-radius: 30%;
}
Join 3 rhombuses with rounded corners
<style>
div{
position: relative;
background-color: orange;
margin:50px auto;
}
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%);
}
</style>
<div></div>
Put the above code into html and you can see the effect!
Option 3: Graphic splicing to achieve gradient color rounded triangles
The essence is to implement a shell shape, and then implement it through rotation and pseudo-classes. Just make a gradient in the shell shape.
code show as below:
<div></div>
<style>
div {
width: 200px;
height: 200px;
transform: rotate(30deg) skewY(30deg) scaleX(0.866);
border-radius: 20%;
margin-top:70px;
overflow: hidden;
border: unset;
}
div::before,
div::after {
content: "";
position: absolute;
width: 200px;
height: 200px;
}
div::before {
border-radius: 20% 20% 20% 55%;
background: #000;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(0.866) translateX(-24%);
}
div::after {
border-radius: 20% 20% 55% 20%;
background: #000;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(0.866) translateX(24%);
}
div::before,
div::after {
background: linear-gradient(#0f0, #03a9f4);
}
</style>
Directly put the above code into html and you can see the effect!