A shape with rounded corners and a triangle

Question

I need to make a shape like the picture below using CSS. There will be a number in the corner and content inside. Please tell me how to do it?

enter image description here

I was only able to do this:

.container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
  border-top-right-radius: 80px;
  border-bottom-left-radius: 80px;
}

.background {
  position: relative;
  top: -20px;
  left: -20px;
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}

.number {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #ffffff;
  font-size: 24px;
}

<div class="container">
  <div class="background">
    <span class="number">1</span>
  </div>
</div>

You're close, just use a couple of extra divs, z index and position relative/absolute and you can easily achieve it — Andy Holmes
– Andy Holmes, Commented Jun 23, 2023 at 18:36
Yes, but I can't round off the triangle and add elements that go beyond the figure — Tailor Tailor
– Tailor Tailor, Commented Jun 23, 2023 at 18:44
you could use ::before and ::after to make the missing red parts — ninadepina
– ninadepina, Commented Jun 23, 2023 at 18:49
Don't use a triangle, use either a radial gradient or, perhaps, a clip path or even a circle and hide 3/4 with overflow. — Paulie_D
– Paulie_D, Commented Jun 23, 2023 at 19:11

Sean Stopnik · Accepted Answer · 2023-06-23 19:41:03Z

1

Here is a fairly close version. There is definitely some "magic numbers" going on in here, but visually it's pretty close.

body {
  font-family: sans-serif;
  background: #25272b;
  padding: 40px;
}

.shape {
  position: relative;
  width: 380px;
  height: 300px;
  border-radius: 0 140px;
  background: #fff;
}

.shape__accent {
  position: absolute;
  top: -15px;
  left: -15px;
  width: 140px;
  height: 140px;
  border-radius: 0 0 130px 0;
  background: #b43b41;
}
.shape__accent:before, .shape__accent:after {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  transform: rotate(-45deg);
  content: "";
}
.shape__accent:before {
  top: 0;
  right: -9px;
  border-right: 11px solid #b43b41;
}
.shape__accent:after {
  bottom: -15px;
  left: 6px;
  border-left: 11px solid #b43b41;
}

.shape__content {
  position: relative;
  font-size: 30px;
  color: #fff;
}

<div class="shape">
  <div class="shape__accent"></div>
  <span class="shape__content">13</span>
</div>

Codepen version: https://codepen.io/seanstopnik/pen/ZEmBJrL/e14888d3196306b79a82cfecbcb44eb4

answered Jun 23, 2023 at 19:41

Sean Stopnik

1,88812 silver badges9 bronze badges

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

1 Comment

Tailor Tailor Over a year ago

This option looks more accurate! Only I'm using pure css, I'll try to rewrite using both answers. Thanks you!

Chris Barr · Accepted Answer · 2023-06-23 19:23:39Z

0

Try this out. Basically it's just a square with one rounded corner. Then the two angled pieces are the ::before and ::after elements rotated and manually placed. It's not perfect but it's close.

body{padding:2rem; background-color: #333;}

.container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #FCFCFC;
  border-top-right-radius: 80px;
  border-bottom-left-radius: 80px;
}

.shape {
    position: relative;
    left: -20px;
    top: -20px;
    background: #b43b41;
    width: 100px;
    height: 100px;
    border-bottom-right-radius: 100%;
}

.shape::before,
.shape::after {
  display: block;
  content: ' ';
  background: #b43b41;
  width: 30px;
  height: 30px;
  transform: rotate(45deg);
  position: absolute;
  z-index: -1;
}

.shape::before {
  top: 6.5px;
    right: -14px;
}

.shape::after {
  bottom: -14px;
  left: 6.5px;
}

.number {
  position: absolute;
  top: -10px;
  left: -10px;
  color: #fff;
  font-size: 24px;
  width: 35px;
  text-align: center;
}

<div class="container">
  <div class="shape"></div>
  <div class="number">1</div>
</div>

answered Jun 23, 2023 at 19:23

Chris Barr

34.6k28 gold badges105 silver badges157 bronze badges

1 Comment

Tailor Tailor Over a year ago

Wow! You are amazing! You saved me, thank you! I promise to improve my knowledge of css)

jbutler483 · Accepted Answer · 2023-07-17 13:33:58Z

I wanted to play around and see if this could be done with a single element, came up with this:

div{
  height:30vw; /*VW units just to show responsiveness*/
  width:30vw;  /*Change these as necessary*/
padding:20px;
  margin:50px;      
  background:#f2f2f2;
  display:inline-block;
  position:relative;
  border-radius:0 40% 0 40%;
  min-width:150px;
  min-height:150px;  
  max-width:320px;
  max-height:320px;
}
div:before, div:after{
  content:"";
  position:absolute;
  top:-5%;
  left:-5%;
  height:40%;
  width:40%;
  background:red;
  padding:inherit;
}
div:before{
  content:'1';
  color:#f2f2f2;
  border-radius:0 0 100%  0;  
}
div:after{
transform-origin:85.5%;
  transform:rotate(-45deg);
  width:calc(55% + 20px);
  z-index:-1;
}

<div></div>

So, the top red part is split into 2 parts:

The quarter circle
The 'shadow' of the quarter circle

Hopefully this could be used for different sizes of height and width (as long as they are kept the same square dimensions).

Collectives™ on Stack Overflow

A shape with rounded corners and a triangle

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related