Making a CSS shape - html

Question

I was trying to make a CSS shape like this. I need to make exact the shape shown in the attached image. How to make this?
Please help.
Fiddle link link
CSS
#activityIcon {
position: relative;
width: 200px;
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
#activityIcon:before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}

Answer 1

Try this :
UPDATE...
MARKUP:
<div id="activityIcon">
<div class=concaveTop></div>
&utrif;
</div>
STYLE:
#activityIcon {
position: relative;
width: 200px;
height: 100px;
background:#757575;
border-radius: 0 0 30px 30px;
margin:40px auto;
color: #ccc;
font-size: 6em;
text-align: center;
line-height: 100px;
}
#activityIcon:before,#activityIcon:after{
content: '';
position: absolute;
width:0;
height:0;
}
#activityIcon:before{
border-left: 20px solid transparent;
border-top: 81px solid #757575;
left: -18px;
}
#activityIcon:after {
border-right: 20px solid transparent;
border-top: 81px solid #757575;
right: -18px;
}
.concaveTop:before, .concaveTop:after{
content: '';
position: absolute;
width: 34px;
height: 32px;
}
.concaveTop{
position: absolute;
top: 0;
width: 314px;
height: 28px;
left: -50px;
overflow: hidden;
box-shadow: 0 -4px 0 #757575;
}
.concaveTop:before{
left: 1px;
box-shadow: 20px -24px 0 3px #757575;
border-radius: 50%;
}
.concaveTop:after{
right: 15px;
box-shadow: -18px -24px 0 3px #757575;
border-radius: 50%;
z-index: 1;
}
DEMO
MARKUP:
<div id="activityIcon">
&utrif;
</div>
STYLE:
#activityIcon {
position: relative;
width: 200px;
height: 100px;
background:#333;
border-radius: 0 0 30px 30px;
margin:40px auto;
color: #ccc;
font-size: 6em;
text-align: center;
line-height: 100px;
}
#activityIcon:before,#activityIcon:after {
content: '';
position: absolute;
width:0;
height:0;
}
#activityIcon:before{
border-left: 20px solid transparent;
border-top: 81px solid #333;
left: -18px;
}
#activityIcon:after {
border-right: 20px solid transparent;
border-top: 81px solid #333;
right: -18px;
}

Answer 2

I'm not sure if my answer provides anything that kougiland's doesn't, but I did it so I figured I might as well post it.
It looks like this.
Here's the codepen.
The HTML looks like this.
<div class="tab-bar">
<div class="tab">&utrif;</div>
<div class="tab">&utrif;</div>
<div class="tab">&utrif;</div>
</div>
The CSS looks like this.
body {
background-color: #eee;
}
.tab-bar {
overflow: hidden;
text-align: center;
}
.tab {
margin: 0 1.55rem;
color: #999;
display: inline-block;
position: relative;
top: 0.1rem;
width: 9rem;
font-size: 3rem;
line-height: 3rem;
background-color: #666;
transform: perspective(4rem) rotateX(-20deg);
border-radius: 0 0 1rem 1rem;
}
.tab::before,
.tab::after {
content: " ";
display: block;
position: absolute;
width: 1rem;
height: 1rem;
top: -1rem;
border-color: #666;
border-style: solid;
}
.tab::before {
left: -1rem;
border-radius: 0 2rem 0 0;
border-width: 1rem 1rem 0 0;
}
.tab::after {
right: -1rem;
border-radius: 2rem 0 0 0;
border-width: 1rem 0 0 1rem;
}