CSS Concave navigation buttons

General requirements, rounded corners look more comfortable, but the lower right angle is slightly stiff

So the designer has the following requirements, with the following small concave type:

Concave type? Concave type? Concave type? A bit perverted, how does this come true ...

The picture is certainly the first to consider, CSS implementation has seemingly a certain degree of difficulty ....

Don't worry, we're dead, go go ...

First the HTML structure, this is very simple, nothing to explain:

<! DOCTYPE html>
 Look at the CSS again 
 
#nav {background: #fff;            border-bottom:1px solid #7bd1ff;            width:960px;            margin:100px Auto;        height:60px;;            } #nav ul li {float:left;            List-style:none;            height:60px;        Margin:0 10px;            } Li * {float:left;        Transition:all. 2s;            }. con {width:60px;            height:60px;            line-height:60px;            Text-align:center;            Background: #7bd1ff;        border-radius:10px 10px 0 0; 　　　　　}/* Sets the size of the concave, positioning */.left through margin,. Right {width:7px; height:7px; margin:53px 0 0 0;}　　　　　/* Below is the key, mainly using the radial gradient radial-gradient, through the proportional division to achieve direct transparency over to the background color, no gradient test results show that transparent 50% is not a translucent half color, 70%+ compare when */.left {background:-webkit-radial-gradient (top left, circle, Transparent 70%, #7bd1ff 30%);}. Right {background: -webkit-radial-gradient (top right, circle, transparent 70%, #7bd1ff 30%);  } li:hover. con {background: #2d85ff} li:hover. Left {background:-webkit-radial-gradient (top left, circle, transparent 70%, #2d85ff 30%); } li:hover. Right {background:-webkit-radial-gradient (top right, circle, transparent 70%, #2d85ff 30%);}
　　
So, this, is not also no difficulty, easy to fix.
CSS Concave navigation buttons