Comment pourrais-je joindre un div plus petit et un plus grand avec des bords arrondis?

Question

J'ai actuellement deux divs sur mon site:

Notez que les deux ont frontière [même couleur que la div] et ils ont aussi un rayon de frontière.

Je veux y parvenir:

Je veux qu'ils se joindre. Comment puis-je y arriver? Si je peux le faire, est-ce que le CSS et le HTML sont suffisants ou ai-je besoin de jQuery et de JS?

Je pensais de faire une grande div des deux, puis la mise en juste un arrière-plan qui est similaire aux deux étant unis, mais c'est un pas parfait pour moi parce que j'ai immédiatement un autre objet ci-dessous 2. div

Alors, comment puis-je le faire?

Merci d'avance.

Answer 1

Définissez les divs les uns à côté des autres et supprimez le rayon de bordure du coin supérieur droit du grand div et du côté gauche du plus petit.

#big { 
    float:left; 
    width:100px; 
    height:100px; 
    background-color:gray; 
    border-top-left-radius:10px; 
    border-bottom-left-radius:10px; 
    border-bottom-right-radius:10px; 
} 

#small { 
    float:left; 
    width:50px; 
    height:50px; 
    background-color:gray; 
    border-top-right-radius:10px; 
    border-bottom-right-radius:10px; 
} 

Voir http://jsfiddle.net/jxMW9/ pour une démo.

Answer 2

Une idée qui vient immédiatement à l'esprit est de donner la deuxième div

position: relative; 
left: -40px; /* Or whatever */ 

qui se déplacera le plus petit div vers la gauche.

Vous pouvez utiliser la propriété z-index pour décider si la div la plus grande doit chevaucher la plus petite ou l'inverse.

Answer 3

Vous pouvez avoir cette html

<div id="one"> </div> 
<div id="two"> </div> 

et ce css

#one { 
    height: 100px; 
    width: 150px; 
    background: #ccc; 
    float: left; 
    -webkit-border-radius: 10px; 
    -webkit-border-top-right-radius: 0; 
    -moz-border-radius: 10px; 
    -moz-border-radius-topright: 0; 
    border-radius: 10px; 
    border-top-right-radius: 0; 
} 
#two { 
    height: 50px; 
    width: 50px; 
    background: #ccc; 
    float: left; 
    -webkit-border-top-right-radius: 10px; 
    -webkit-border-bottom-right-radius: 10px; 
    -moz-border-radius-topright: 10px; 
    -moz-border-radius-bottomright: 10px; 
    border-top-right-radius: 10px; 
    border-bottom-right-radius: 10px; 
} 

Jetez un oeil sur ce lien de démonstration http://jsfiddle.net/nGVaa/

Answer 4

Il suffit de définir float:left; sur les divs et ajouter classe supplémentaire à celles que vous voulez fusionner

.merge { 
    position: relative; 
    margin-left: -10px; 
} 

Vérifiez les résultats sur jsfiddle