Triangle (Border problem|CSS)😇[Solved by ME]

Question

Once we make a triangle using this code;
....................................................................
. triangle{
width: 0;
height: 0;
border-left:100px solid transparent;
border-right:100px solid transparent;
border-bottom:100px solid #f57070;
}
......................................................................

Once we obtain a simple triangle....how can we obtain a triangle with rounded corners/border radius applied to the three corners ?....
Hope u understood,😇

Answer 1

visph
Here's my proof

https://code.sololearn.com/WXf6ZQ0D6toC/?ref=app

Answer 2

Ok Thanks 😇

Answer 3

visph U told that we cannot do what I say by css.....but I finally found a way to do it with just html & css😁

Answer 4

Only CSS😎

Answer 5

no ways with html elements ^^

the only ways to make rounded triangles displayed in html page would be:

1) display a bitmap (drawed in external software)

2) use svg to draw it (and either embed the code or the vector image)

3) use canvas to draw it

Answer 6

I did develop some by my own and some not by me..I combined some of my codes with some values of other codes...and it made it work...but It was so hard to find the exact digit....😞😇

Answer 7

yes, you could probably approximate some round "corners/borders" by using a mask ^^ but that's not real ones ;P

anyway: show us your code to convince themselves ;)

Answer 8

you're right... I'm wrong...

without mask and with real round "corners/borders"...

you're the best... if you find/compute the required transform yourself and not copy pasting someone else code ;P (but that not change the fact I was wrong^^)

with your technic it seems that you could do any triangle (not only equilateral), but it would be a pain to find the correct values to each transforms and keep the correct alignement of each parts^^