How to build a convex curved triangle? [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

Want to improve this question? Guide the asker to update the question so it focuses on a single, specific problem. Narrowing the question will help others answer the question concisely. You may edit the question if you feel you can improve it yourself. If edited, the question will be reviewed and might be reopened.

Closed 3 years ago.

Improve this 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>

Temani Afif · Accepted Answer · 2022-08-23 09:23:49Z

3

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>

answered Aug 23, 2022 at 9:23

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to build a convex curved triangle? [closed]

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related