How to triangle top and bottom border?

Question

As you can see in the image below, I am trying to warp or triangle my div from bottom and top, but I have no idea how to do it. I just tried a couple of times to do it, but

Answer 1

Adjust the measurements to fit your exact shape requirements. This gives something close to what you are looking for.

body{
background:lightblue;;
}
.block{ position: 
relative; width:200px; 
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);:
 }


}
.block:before
{ content: '';
position: absolute;
top: 20%; 
bottom: 20%; 
right: -5%; 
left: -5%; 
background: inherit;
border-radius: 5% / 50%;
}