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?
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>
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>