Comment puis-je ajouter de l'extérieur des coins arrondis pour un div?

Je suis à la recherche d'ajouter un "extérieur" coins arrondis de la sélection de la barre latérale de l'élément pour donner l'effet que cet élément est "verser" dans le contenu.

Dans mon exemple ci-dessous, j'aimerais que la .top pour avoir un arrondi dans le coin inférieur droit avec un fond gris, avec une semblable coin en haut à droite de la .bottom. Qu'en pensez-vous?

Je suis en utilisant Twitter Bootstrap et MOINS, si cela la rend plus facile.

jsFiddle: http://jsfiddle.net/3YXb2/

De transformer ceci:

Comment puis-je ajouter de l'extérieur des coins arrondis pour un div?

Dans cette:

Comment puis-je ajouter de l'extérieur des coins arrondis pour un div?

Balisage:

<div class="wrapper">
    <div class="sidebar">
        <div class="top">
            <p>Top</p>
        </div>
        <div class="middle">
            <p>Middle</p>
        </div>
        <div class="bottom">
            <p>Bottom</p>
        </div>
    </div>
    <div class="container">
        <p>Content</p>
    </div>
</div>

CSS:

body {
    margin:10px;
}
div {
    margin:0;
    margin-right:-4px;
    padding:0;
    display:inline-block;
    vertical-align:middle;
}
.wrapper {
    width:100%;
    display:block;
    border:1px solid;
}
.container {
    background-color:gray;
    width:70%;
    height:300px;
}
.sidebar {
    background-color:white;
    width:30%;
    height:300px;
}
.middle {
    background-color:gray;
}
.top,.middle,.bottom {
    width:100%;
    height:100px;
    display:block;
}
p {
    padding:40px 0 0;
    margin:0;
    text-align:center;
}

OriginalL'auteur Ryan | 2013-04-24

  1. 14

    Css3 offre la border-radius de la propriété. Cependant, veuillez noter que ce n'est pas disponible pour IE8 ou une version inférieure. Il y en a hacks; mais ils sont ce qu'ils sont: des hacks.

    Utilisation ressemble à ceci:

        .sidebar {
        background-color:gray;
        width:30%;
        height:300px;
    }
    .middle {
        background-color:gray;
    }
    .top,.middle,.bottom {
        width:100%;
        height:100px;
        display:block;
    }
    .top{
        background: white;
        border-bottom-right-radius:10px;
    }
    .bottom{        
        background: white;
        border-top-right-radius: 10px;
    }

    jsFiddle exemple

    Oui, j'ai été jouer avec le .border-top-right-radius(10px); mixin dans le bootstrap, mais je ne peux pas comprendre comment faire de l'arrière-plan de "vide" coin le même que .middle dans mon exemple.
    Vous auriez juste un wrapper assis derrière tout - laissez-moi essayer de vous faire un exemple d'utilisation de votre code.
    Mise à jour du post avec l'image pour la rendre plus claire.
    href="http://jsfiddle.net/3YXb2/7/" >jsfiddle.net/3YXb2/7
    la dernière mise à jour devrait faire exactement ce que vous voulez. Si ce n'hésitez pas à me le faire savoir, mais cela devrait faire l'affaire 🙂

    OriginalL'auteur What have you tried

  2. 3

    vous pouvez utiliser border-radius CSS. vous pouvez voir en ligne tour frontière générateur ici:
    http://border-radius.com/

    Mais comment choisir la couleur de l'arrière-plan de l'angle?
    Je ne suis pas sûr de ce que vous entendez par le fond de l'angle. Il serait de la même couleur que la "couleur de fond" si vous voulez, vous pouvez déposer une ombre en propriété box-shadow.
    Donc, si j'ai ajouter une bordure de rayon à la .top div ci-dessus, il va au coin de la rue des blancs div. Mais j'ai besoin de le coin pour être gris. et le reste blanc. Où le gris regarde la partie de la .middle.
    Mise à jour du post avec l'image pour la rendre plus claire.
    vous pouvez faire quelques choses. Si dessous le top div vous disposez d'une même taille de div avec un fond gris, le coin apparaissent en gris. Une autre option serait de rendre le contenu de la div conteneur et de mettre les autres en haut au milieu et en bas sur le dessus de cela. de cette façon, le coin semble que le gris aussi.

    OriginalL'auteur beebee

  3. 2

    Si je vous comprends bien, vous êtes à la recherche d'une inversion de la frontière rayon. Est-ce que vous avez à l'esprit?

    http://jsfiddle.net/3pW2M/

    Cela ne fonctionnera pas si la zone blanche doit être transparent pour montrer une image d'arrière-plan par exemple.

    .top {
    position: relative;
}

.topcorner {
    position: absolute;
    margin: 0;
    bottom: 0;
    right: 0;
    height: 50px;
    width: 50px;
    background: gray;
}

.topcorner:after {
    content: '';
    position: absolute;
    height: 50px;
    width: 50px;
    background: white;
    border-radius: 0 0 50px 0;
}
    Oui! C'est ce que je suis à la recherche pour. Je vais jouer avec cela, assurez-vous, mais cela pourrait peut-être marcher! Merci.

    OriginalL'auteur Magnus Magnusson

  4. 2

    Je suppose que ce sera nécessaire pour certains de tri de l'interaction de l'utilisateur, la navigation, onglets, ext. Alors je l'ai mis sur un jquery passez la fonction jsFiddle

    $(document).ready(function () {
  $('.top').hover(function () {
    $('.middle').toggleClass('notSelect2');
    $('.bottom').toggleClass('notSelect3');
  });

  $('.middle').hover(function () {
    $('.top').toggleClass('notSelect');
    $('.bottom').toggleClass('notSelect2');
  });

  $('.bottom').hover(function () {
    $('.middle').toggleClass('notSelect');
    $('.top').toggleClass('notSelect3');
  });
});

    OriginalL'auteur apaul

  5. 1

    Vous souhaitez utiliser border-radius et variantes.

    Par exemple 

    border-radius: 5px 5px 0px 0px; 
-moz-border-radius: 5px 5px 0px 0px; 
-webkit-border-radius: 5px 5px 0px 0px;

    Bel outil pour ça ici:
    http://www.cssportal.com/css3-rounded-corner/

    Oui, j'ai été jouer avec le .border-top-right-radius(10px); mixin dans le bootstrap, mais je ne peux pas comprendre comment faire de l'arrière-plan de "vide" coin le même que .middle dans mon exemple.
    canb vous poster une image de ce que vous voulez qu'il ressemble en fin de compte?
    Mis à jour le post avec l'image. Merci.

    OriginalL'auteur Rid Iculous

  6. 1

    Utiliser le CSS3 border-radius.

      .top
     {
       border-bottom-right-radius: 3px;
       -moz-border-radius-bottomright: 3px;
       -webkit-border-bottom-right-radius: 3px;
     }

 .bottom
    {
      border-top-right-radius: 3px;
      -moz-border-radius-topright: 3px
      -webkit-border-top-right-radius: 3px;
    }

    OriginalL'auteur Jude Duran