Wie kann ich äußere abgerundete Ecken, um einen div?

Ich bin auf der Suche hinzufügen "äußeren" abgerundete Ecken, um die ausgewählten sidebar-Element, um die Wirkung, die dieses Element ist "Gießen" in die Inhalte gut.

In meinem Beispiel unten möchte ich die .top haben eine abgerundete Ecke unten rechts mit einem grauen hintergrund, zusammen mit einer ähnlichen oberen rechten Ecke für die .bottom. Was denkst du?

Ich bin mit Twitter Bootstrap und WENIGER, wenn das macht es einfacher.

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

Schalten Sie diese:

In diesem:

Markup:

<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;
}

InformationsquelleAutor Ryan | 2013-04-24

14

Css3 bietet die border-radius Eigenschaft. Bitte beachten Sie jedoch, dass diese nicht für den IE8 oder eine version niedriger. Es sind hacks; aber Sie sind genau das: hacks.

Nutzung sieht wie folgt aus:
```
    .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-Beispiel
- Ja, ich habe das Spiel mit der .border-top-right-radius(10px); mixin in der bootstrap-aber ich kann nicht herausfinden, wie, um den hintergrund der "leeren" Ecke, die gleichen wie .middle in meinem Beispiel.
- Sie würde nur noch ein wrapper sitzen hinter allem - lassen Sie mich versuchen, Sie zu machen ein Beispiel mit code.
- Update-post mit Bild deutlicher machen.
- href="http://jsfiddle.net/3YXb2/7/" >jsfiddle.net/3YXb2/7
- das neueste update soll genau das tun, was Sie wollen. Wenn nicht, fühlen Sie sich frei, mich wissen zu lassen, aber das sollte den trick tun 🙂
- schöne Arbeit! Slick Verwendung von sidebar-hintergrund. Werde sehen, wenn ich diese Arbeit in der Produktion. Danke.
- Ja, tun wird. Nur versuchen, es zu machen, arbeiten in der Produktion. Bald.
- lassen Sie uns weiter, diese Diskussion im chat
InformationsquelleAutor What have you tried
3

können Sie verwenden Sie border-radius CSS. Sie können sehen, eine online-Runde Grenze generator hier:
http://border-radius.com/
- Aber wie wähle ich die Farbe von dem hintergrund der Ecke?
- Ich bin mir nicht sicher was du meinst mit dem hintergrund der Ecke. Es wäre die gleiche Farbe wie "hintergrund-Farbe", wenn Sie möchten, können Sie ein drop-shadow box-shadow-Eigenschaft.
- Also, wenn ich einen border-radius für die .top div oben, es wird um die Ecke der das schon weiß div. Aber ich brauche die Ecke zu Grau. und der rest weiß. Wo das Grau sieht ein Teil der .middle.
- Update-post mit Bild deutlicher machen.
- Sie können ein paar Dinge. Wenn unter den oberen div-Sie haben dieselbe Größe div mit dem grauen hintergrund, die Ecke wird angezeigt, wie Grau. Eine andere Möglichkeit wäre, dass der Inhalt als div-container und den anderen oben Mitte und unten, oben drauf. so, die Ecke scheint, als Grau zu.
InformationsquelleAutor beebee
3

Wenn ich Sie richtig verstehe, du suchst ein umgekehrtes border-radius. Ist es das, was Sie im Sinn haben?

http://jsfiddle.net/3pW2M/

Wird das nicht funktionieren, wenn die weiße Fläche muss transparent sein, um zu zeigen, ein Hintergrundbild zum Beispiel.
```
.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;
}
```
- Ja! Dies ist, was ich Suche. Ich werde spielen, um mit diesem sicher zu stellen, aber dies könnte nur Arbeit! Danke.
- Das wirklich tolle Antwort! Danke! Aber was, wenn wir brauchen, um zu füllen weiß mit einigen König von Verlaufs-oder Bild-hintergrund?
InformationsquelleAutor Magnus Magnusson

Ich gehe davon aus, dass diese benötigt werden für eine Art Benutzer-Interaktion, navigation, tabs, ext. So habe ich es bis auf eine jquery hover-Funktion- 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');
  });
});

InformationsquelleAutor apaul

1

Den Sie verwenden möchten, border-radius und ist-Varianten.

ZB
```
border-radius: 5px 5px 0px 0px; 
-moz-border-radius: 5px 5px 0px 0px; 
-webkit-border-radius: 5px 5px 0px 0px; 
```
Nettes tool dafür hier:
http://www.cssportal.com/css3-rounded-corner/
- Ja, ich habe das Spiel mit der .border-top-right-radius(10px); mixin in der bootstrap-aber ich kann nicht herausfinden, wie, um den hintergrund der "leeren" Ecke, die gleichen wie .middle in meinem Beispiel.
- canb Sie post ein Bild von dem, was Sie wollen, es zu schauen, wie am Ende?
- Aktualisiert die post mit Bild. Danke.
InformationsquelleAutor Rid Iculous

Verwenden, der 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;
    }

InformationsquelleAutor Jude Duran

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

jsFiddle-Beispiel