问如何创建带有拱门的标签？

EN

<ul class="tabs">
    <li><a href="#">Archive</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#">Store</a></li>
    <li><a href="#">Patv</a></li>
</ul>
<br style="clear:both;" /> <!-- I didn't have an other element to clear the floats with -->

.tabs { /* generates the grey line on the very top */
    width: 100%;
    height: 5px;
    background: grey;
}

.tabs li {
    list-style-type: none;
    float: left;
}

.tabs li:first-child {
    margin-left: 30px; /* This is just to move the menu to the left, for demo purposes */
}

.tabs a {
    text-underline: none;
    color: black;
    line-height: 30px;
    padding: 10px 20px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: grey;
}

.tabs a:after, .tabs li:first-child a:before {
    content: '';
    width: 4px;
    height: 25px;
    background: white; /* This has to be the background color of the container. Change it to red to see the pseudo elements */ 
    position: absolute;
    margin-top: 5px;
    margin-left: -3px;
    border-radius: 10px;
}

.tabs a:after {
    margin-left: 18px;
}