Q:

Arc/Curve in CSS3 rather than image - border-radius?

I've been given a design (see snippet image) with tabs top and bottom. They begin with a curve. Rather than use a graphic, I'd like to do this with CSS but it must be exactly as the design (top curve opposite to bottom curve).
I feel like it's achievable but it might be quite a dirty hack, like a circle inside a div with anything overlapping the div hidden, hmmm. Any CSS whizz kids who can advise?

A:

You could do it with a pseudo element:

body {
    background: pink;
}
.someElement {
    background: purple;
    height: 30px;
}

.someElement:before {
    content: "";
    width: 15px;
    height: 32px;
    background: pink;
    border-radius: 0 0 100% 0;
    display: block;
}
<div class="someElement"></div>

