Wie kann ich einem div eine äußere abgerundete Ecke hinzufügen?

8

Ich möchte dem ausgewählten Element der Seitenleiste "äußere" abgerundete Ecken hinzufügen, um den Effekt zu erzielen, dass dieser Gegenstand in den Inhalt "hineinfließt".

In meinem Beispiel unten möchte ich, dass .top eine abgerundete untere rechte Ecke mit einem grauen Hintergrund und eine ähnliche obere rechte Ecke für .bottom hat. Was denkst du?

Ich benutze Twitter Bootstrap und weniger, wenn das einfacher ist.

jsFiddle: Ссылка

Drehe das:

Dazu:

Auszeichnung:

%Vor%

CSS:

%Vor%     
Ryan 24.04.2013, 00:59
quelle

6 Antworten

14

Css3 bietet die Eigenschaft border-radius . Beachten Sie jedoch, dass dies für IE8 oder eine niedrigere Version nicht verfügbar ist. Es gibt verfügbare Hacks ; aber sie sind nur das: Hacks.

Die Verwendung sieht so aus:

%Vor%

jsFiddle-Beispiel

    
What have you tried 24.04.2013, 01:04
quelle
3

Sie können den Border-Radius von CSS verwenden. Sie können hier einen Online-Rundumrandgenerator sehen: Ссылка

    
beebee 24.04.2013 01:01
quelle
2

Wenn ich Sie richtig verstehe, suchen Sie nach einem umgekehrten Grenzradius. Hast du das vor Augen?

Ссылка

Dies funktioniert nicht, wenn der weiße Bereich transparent sein muss, um beispielsweise ein Hintergrundbild anzuzeigen.

%Vor%     
Magnus Magnusson 24.04.2013 01:18
quelle
2

Ich gehe davon aus, dass dies für eine Art von Benutzerinteraktion, Navigation, Tabs, ext benötigt wird. Also habe ich es auf eine jquery-Hover-Funktion eingerichtet - jsFiddle

%Vor%     
apaul 24.04.2013 02:59
quelle
1

Sie möchten den border-Radius und seine Varianten verwenden.

EG

%Vor%

Nettes Werkzeug hierfür: Ссылка

    
Rid Iculous 24.04.2013 01:05
quelle
1

Verwenden Sie den CSS3 Rahmenradius .

%Vor%     
Jude Duran 24.04.2013 01:07
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Rückgabe eines std :: vector - right-Ansatzes