Onglet de conception titre CSS pour se connecter avec le contenu de l'onglet - coins de cercle

Question

Je suis en train de concevoir des onglets html + css pour ressembler à ce dessin: Lorsque l'onglet est sélectionné, le titre est connecté au contenu de l'onglet et le "cou" arrondit dans les expositions de flèche comme.

j'ai réussi à arriver jusqu'à présent comme celui-ci une image attachée avec une div qui relie le titre et le contenu onglet. Le problème est que le coin n'est pas rond. Je ne peux pas faire le rayon de la frontière parce que ce n'est pas vraiment un div, c'est 2 divs connectés. Je suis sûr qu'ils sont un meilleur moyen d'obtenir ce look. Comment pourrait-on faire le design en html?

Answer 1

Une solution possible serait d'entourer tous les autres onglets sous une forme d'un div puis utilisez la CSS border-bottom-left-radius and border-bottom-right-radius properties

<!-- Psuedocode idea, have not tested... --> 
<div id=#tabwrapperLeft style="border-radius-bottom-right: 5px"> 
    <div>tab1</div> 
    <div>tab2</div> 
    ... 
    <div>tabI-1</div> 
</div> 

<div>tabI</div> 

<div id=#tabwrapperRight style="border-radius-bottom-left: 5px"> 
    <div>tabI+1</div> 
    ... 
    <div>tabN</div> 
</div> 

Dans votre exemple ci-dessus, le bleu, l'orange et les pattes jaunes, entouré dans un élément avec un rayon de bordure-bas-droite. Cependant, dans un cas plus général, comme si l'onglet jaune était sélectionné, les onglets non sélectionnés à droite auraient besoin de border-bottom-left-radius.

Faites-moi savoir ce que vous en pensez!