Clip Path Buttons For Circular Nav - html

Question

I need to make a circular nav with a transparent center and buttons shaped like the bars around this Iron Man thing.
Below is my attempt using clip path... is there a way to do curves to make this easier, or must I draw many more points to make this look good?
CSS
.circle-new-btn {
background: rgba(0,0,0,1.00);
height: 300px;
width: 300px;
-webkit-clip-path: polygon(52% 21%, 57% 22%, 61% 24%, 65% 28%, 68% 31%, 59% 48%, 56% 46%, 53% 44%, 49% 43%, 45% 42%, 41% 44%, 38% 47%, 34% 50%, 32% 28%, 36% 25%, 40% 24%, 46% 22%);
clip-path: polygon(52% 21%, 57% 22%, 61% 24%, 65% 28%, 68% 31%, 59% 48%, 56% 46%, 53% 44%, 49% 43%, 45% 42%, 41% 44%, 38% 47%, 34% 46%, 32% 28%, 36% 25%, 40% 24%, 46% 22%);
}
.circle-new-btn:hover {
background: rgba(111,111,0,1.00);
}
HTML
<div class="circle-new-btn"></div>

Answer 1

Here is an idea how you can create this shape using CSS:
.box {
width:200px;
height:100px;
padding:20px 0;
box-sizing:border-box;
color:#fff;
text-align:center;
background:
radial-gradient(circle at 50% 160%,transparent 45%,blue 44.5%,blue 85%,transparent 85%);
-webkit-clip-path: polygon(0 0, 100% 0, 75% 90%, 25% 90%);
clip-path: polygon(0 0, 100% 0, 75% 90%, 25% 90%);
}
<div class="box">
Some text
</div>
Then you can simply apply some rotation to place the buttons around the big circle.