Diagonalen Randradius erstellen
Nachdem ich eine Weile nach einer Lösung gesucht habe, habe ich keine gefunden. Ich versuche, einen diagonalen Rahmen an der ersten li -Elements top left -Ecke zu erstellen. Ich habe versucht, eine Lösung mit der background -Eigenschaft zu verwenden, aber es gibt mir nicht ganz das, was ich will. Es erlaubt auch keine Manipulation der Farben, die später benötigt werden.
Die hellblaue Farbe sollte ein Rahmen sein, der geschnitten wird (und kein Hintergrund, der geschnitten wird) und das dunkle Grau sollte der Hintergrund von li sein.
Wie kann ich dies über CSS erreichen? Eine JS / Jquery-Lösung würde ebenfalls funktionieren.
BEARBEITEN: Nachdem ich eine Menge fehlinterpretierter Antworten auf meine Frage gesehen habe, werde ich es ein wenig verdeutlichen:
Das linke Bild ist was ich jetzt habe, das richtige Bild sollte das Ergebnis sein.
2 Antworten
Wenn ich Frage verstehe, brauchen Sie etwas wie dieses
HTML:
%Vor%CSS:
%Vor%UPDATE:
Mit border-radius ist das nicht möglich. Verwenden Sie einfach CSS-Formen oder Hacks wie diese aktualisierte Geige
HTML:
%Vor%CSS:
%Vor% Wie wäre es, das so zu erreichen? ohne border-radius Eigenschaft
WORKING FIDDLE
Sehen Sie sich auch Die Formen von CSS bei CSS-Tricks an.
HTML
%Vor%CSS
%Vor%Tags und Links javascript jquery css