Css rounded corner triangle

CSS ideas | clever implementation of a triangle with rounded corners

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.

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 strok-linejoin ="round" points="100,0 0200 200200 "/ / SVG 

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:

• miter Is the default, which means to use a square brush to form a sharp corner at the junction
• round Represents the connection with rounded corners to achieve a smooth effect
• bevel The 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:

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:

Rounded one of the corners:

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 < 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 div:after

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

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) :

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

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:

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.

Источник

How to make 3-corner-rounded triangle in css?

Creating shapes using CSS can often be a challenge, but with a little creativity and understanding of CSS concepts, it can be achieved with ease. One common shape that is not easily achieved using CSS is a 3-corner-rounded triangle. However, with a few techniques, it is possible to create a similar effect using CSS. In this article, we will explore different methods to create a 3-corner-rounded triangle in CSS.

Method 1: Using Border

To create a 3-corner-rounded triangle in CSS using border, you can follow these steps:

1. Apply the following CSS code to the div element to create a triangle shape with border and rounded corners:

.triangle  width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-right: 50px solid #f00; border-top-right-radius: 30px; border-bottom-right-radius: 30px; >

In this code, we set the width and height of the div element to 0, and then use the border property to create a triangle shape with a red color (#f00). We also use the border-top-right-radius and border-bottom-right-radius properties to round the corners of the triangle on the right side.

1. You can adjust the size and color of the triangle by changing the values of the border properties and the border-radius properties.

Here is another example of creating a 3-corner-rounded triangle with a different color and size:

.triangle  width: 0; height: 0; border-top: 70px solid transparent; border-bottom: 70px solid transparent; border-right: 70px solid #00f; border-top-right-radius: 50px; border-bottom-right-radius: 50px; >

In this code, we set the size of the triangle to 70px, and use a blue color (#00f) for the border. We also increase the radius of the corners to 50px.

You can create different variations of the 3-corner-rounded triangle by adjusting the values of the border properties and the border-radius properties.

Method 2: Using Pseudo-elements

To create a 3-corner-rounded triangle in CSS using pseudo-elements, follow these steps:

1. Create a container element with a specified height and width.
2. Set the position property to relative for the container element.
3. Create a pseudo-element (::before) for the container element and set its position property to absolute.
4. Set the width and height of the pseudo-element to 0.
5. Set the border property of the pseudo-element to the desired size and color.
6. Set the border-radius property of the pseudo-element to the desired value for the corners you want to round.
7. Set the top and left properties of the pseudo-element to 0.
8. Create another pseudo-element (::after) for the container element and repeat steps 3-7, but set the border-radius property for the opposite corners.

Here’s an example code snippet:

.container < position: relative; height: 0; width: 0; border-top: 50px solid red; border-right: 50px solid transparent; border-bottom: 50px solid transparent; border-radius: 0 0 50% 50%; >.container::before, .container::after < content: ""; position: absolute; width: 0; height: 0; border: 25px solid transparent; >.container::before < border-top-color: red; border-right-color: red; top: 0; left: 0; border-radius: 0 0 0 50%; >.container::after

In this example, the container element has a red border on the top and rounded corners on the bottom left and right. The two pseudo-elements create the triangle shape with rounded corners on the opposite sides. The first pseudo-element is positioned in the top left corner and the second pseudo-element is positioned in the bottom right corner.

You can adjust the size, color, and border-radius properties to create different variations of the 3-corner-rounded triangle shape.

Method 3: Using SVG

To create a 3-corner-rounded triangle in CSS using SVG, follow these steps:

svg width="100" height="100"> path d="M 50 0 L 100 100 L 0 100 Z" /> svg>

1. Use the path element to define the shape of the triangle using the d attribute. The M command specifies the starting point of the path, L commands draw lines to the specified points, and Z closes the path.
2. To add rounded corners to three of the corners, use the rx and ry attributes of the path element. These attributes specify the horizontal and vertical radii of the ellipse used to round the corners. For example, to round the top-left, top-right, and bottom-left corners, use the following code:

svg width="100" height="100"> path d="M 50 0 L 100 100 L 0 100 Z" rx="10" ry="10" /> svg>

Here are some additional examples:

 svg width="100" height="100"> path d="M 50 0 L 100 100 L 0 100 Z" rx="10" ry="20" /> svg> svg width="200" height="200"> path d="M 100 0 L 200 200 L 0 200 Z" rx="30" ry="30" fill="#ff0000" stroke="#000000" stroke-width="2" /> svg>

These examples show how to create 3-corner-rounded triangles with different radii, sizes, and colors. Use these examples as a starting point to create your own custom shapes using SVG in CSS.

Источник

How to Make 3-Corner-Rounded Triangle in Css

My best attempt: http://dabblet.com/gist/4592062

Pixel perfection at any size, uses simpler math than Ana’s original solution, and is more intuitive in my opinion 🙂

.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

css rounded corner of right angled triangle

Here is an idea where you can rely on 2 pseudo element and some background coloration to approximate it. You simply need to find the correct value to have the perfect overlap between both pseudo elements.

Is it possible to make a rounded triangle with just CSS?

To actually answer your question (and provide the first answer without border-radius ): If you want a CSS only solution, you will have to use border-radius .

Nevertheless I would highly recommend to use SVG for creating shapes, as simple shapes like this are easy to create manually, it’s responsive, it’s widely supported now and (as @chharvey mentioned in the comments) semantically more appropriate.

Triangle with one rounded corner

I know this is a little hacky, but I don’t think there is an easy way to do this with a single class.

All I’ve done is rotated a box 45 degrees with border-radius:10px and then contained it in another div with width set to the desired width of your arrow and overflow:hidden so that everything that spills over is invisible.

Rounded triangle right border css

You can add new div for arrow and apply the CSS for it..

* < box-sizing: border-box>.price < width: 100px; height: 50px; background: #2d2d2d; color:#fff; align-items: center; display: flex; position:relative; >.icon < font-size: 50px; >.items < margin-left: 10px; display: flex; flex-direction: column; height: 100%; padding: 6px 0; justify-content:space-between >.arrow < position: absolute; background-color: #2d2d2d; text-align: left; top: 4px; right: -23px; transform: rotate(-90deg) skewX(-30deg) scale(1,.866);>
.arrow:before,.arrow:after < content: ''; position: absolute; background-color: inherit;>
.arrow,.arrow:before,.arrow:after < width: 28px; height: 28px; border-top-right-radius: 30%;>.arrow:before < transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);>
.arrow:after

Pure CSS tag div, with rounded triangle pointer

you can use clip-path for the shape, an SVG filter for the rounded corner (adjust the stdDeviation to control the radius) and a gradient coloration for the dot:

.box display: inline-block; 
filter: url('#goo');
>

.box div margin: 10px; 
padding: 20px 40px 20px 20px; 
font-size: 35px; 
font-weight: bold; 
font-family: sans-serif; 
color:#fff; 
transform-origin: right center; 
transform:rotate(-45deg); 
background: 
radial-gradient(8px at calc(100% - 20px) 50%,#fff 99%,transparent),/* the dot */ 
linear-gradient(60deg,red,orange); /* gradient coloration */ 
clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100%);
>

How to create a triangle in CSS3 using border-radius

Demo

css3 triangle shape with one rounded corner

One solution that appears to work (tested in Chrome, Safari, Firefox) is removing the following lines from .triangle-topright

-webkit-border-top-right-radius: 6px 6px;
-moz-border-radius-topright: 6px / 6px;
-khtml-border-top-right-radius: 6px / 6px;
border-top-right-radius: 6px / 6px;

And instead simply adding overflow: hidden; to the .box css.

Источник