I'm currently pondering if I should create the shapes manually or simply use a background image to achieve the desired effect on mobile view.
https://i.sstatic.net/y99A8.png
Any input or guidance on this matter would be greatly appreciated.
As of now, I've made an attempt to fashion 3 parts of shapes, but the values are hardcoded which may lead to inconsistency across different devices.
https://codepen.io/2EZHenry/pen/MWqaVXz
<div class="outerdiv">
<div class="container">
text
</div>
</div>
.outerdiv {
height:400px;
width:200px;
border:1px solid black;
display:flex;
align-items:center;
justify-content:center
}
.container{
height:50px;
width:100%;
background:blue;
position:relative;
}
.container::before{
content: "";
left: 0;
height: 180px;
position: absolute;
width: 100%;
bottom: 100%;
background: blue;
border-top-right-radius: 100%;
}
.container::after{
content: "";
left: 0;
height: 180px;
position: absolute;
width: 100%;
top: 100%;
background:blue;
border-bottom-left-radius: 100%;
}