Fügen Sie einem div ein Dreieck hinzu, das sich mit der Inhaltshöhe mit CSS ändert?
Ich habe ein div und ich muss ihm einen eckigen Punkt geben. Die Höhe variiert je nach Inhalt, so dass die Verwendung von Pseudoinhalt und Rahmen wie im folgenden Artikel nicht funktioniert.
Da dies eine progressive Verbesserung ist, muss ich nur moderne Browser unterstützen.
5 Antworten
Sie könnten dies mit svg machen.
svg 's (Hintergrund) height ist vollständig abhängig von #content ' s (Text) height .
CSS-Clippfad
Dies verwendet clip-path -Eigenschaft, die von vielen modernen Browsern nicht unterstützt wird.
CSS - Farbverläufe
Die Browserunterstützung für CSS-Gradienten ist ziemlich gut. Bitte beachten Sie, dass dies im Wesentlichen der Vals Antwort entspricht, aber nur mit einer dynamischen Höhe.
CSS + JS
Die folgende Lösung verwendet CSS und JS und funktioniert browserübergreifend. Das JS wurde von web-tiki zur Verfügung gestellt.
Ich würde versuchen, mit SVG im Hintergrund:
%Vor%Hinweis: Das SVG-Bild hat ein weißes Rechteck und ein grünes Dreieck. Es wird also nicht funktionieren, wenn der Hintergrund unter dem Pfeil keine Volltonfarbe ist.
Wenn die Breite festgelegt wurde, können Sie das SVG auf einen generierten Inhalt außerhalb der grünen Box setzen, wodurch ein weißer Hintergrund unter dem Pfeil vermieden werden könnte:
%Vor%Dies kann auch durch Schrägstellung und Drehung
erfolgen
Tags und Links html css css3 css-shapes