How to build a convex curved triangle?

Question

How to build a convex curved triangle with CSS? I just need the top maroon part. It's basically a triangle that curves outward.

I know I need to use calc for height and width. But I don't know where to start. But I need it to be fatter at the top.

 div { position: relative; height: 200px; width: 200px; border-bottom: 2px solid tomato; overflow: hidden; transform: rotateY(30deg); */ } div:before { position: absolute; content: ''; left: 0px; top: 50%; height: calc(100% - 6px); width: calc(100% - 6px); border-radius: 100% 0% 100% 100%; transform: rotate(-45deg); border: 3px solid tomato; }

 <div></div>

Answer 1

I would go with skew transformation on pseudo element. You can play with the radius and the skew until you get what you want.

 .box { width: 200px; height: 150px; position: relative; overflow: hidden; }.box::before, .box::after { content: ""; position: absolute; width: 50%; height: 100%; top: 0; background: red; }.box::before { left: 0; border-top-left-radius: 45px 60px; transform-origin: right; transform: skewY(-30deg); }.box::after { right: 0; border-top-right-radius: 45px 60px; transform-origin: left; transform: skewY(30deg); }

 <div class="box"></div>