Geben Sie einem CSS-Rahmen einen Rahmen auf 1 Seite
Ich hoffe, dass jemand mir helfen kann, eine schöne, elegante Art zu finden, eine Grenze für einen CSS-Pfeil zu bekommen.
Ich versuche das zu erstellen:
Hier ist mein Code so weit:
HTML
%Vor%CSS
%Vor%Hier ist eine funktionierende JS Geige Ссылка
Wie Sie sehen können, habe ich einen blauen Rand rechts von der Hauptbotschaft, aber ich finde keinen Weg, den blauen Rand auch auf den Pfeil zu bekommen. Wenn es mir möglich ist, möchte ich wirklich vermeiden, ein Bild zu verwenden. Es wäre schön, eine CSS-Lösung zu finden.
Ich habe darüber nachgedacht, das :before sudo-Element zu verwenden, aber ich kann nicht die volle Kontrolle bekommen, die ich brauche.
Jede Hilfe würde sehr geschätzt werden.
AKTUALISIEREN
Ich habe es geschafft, eine Lösung zu finden, aber um ehrlich zu sein, ist es nicht sehr sauber.
Ich habe ein neues Element hinzugefügt, das die Breite des Rahmens hat und die gleiche Hintergrundfarbe hat. Ich setze dann die Höhe auf etwas weniger als die Höhe des CSS-Pfeils. Ich gebe dann meinem neuen Element einen CSS-Pfeil die Hintergrundfarbe des Rahmens.
Hier ist der neue Code:
HTML
%Vor%CSS
%Vor%Während diese Lösung funktioniert, glaube ich, dass es bessere und sauberere Optionen geben könnte, daher bin ich immer noch offen für Vorschläge.
4 Antworten
Mit svg könntest du deine Textblase erstellen und linearGradient darauf anwenden.
Damit eine Textblase dynamischen Text enthält, müssen Sie das Dreieck als svg verwenden. Der Text befindet sich außerhalb von svg .
Anwenden von box-shadow :
Um ein box-shadow zum svg hinzuzufügen, musst du einen svg filter auf den Pfad anwenden. Das Ausführen über CSS funktioniert nicht, da CSS den tatsächlichen Pfad nicht sehen kann.
feFuncA elements slope Attribut steuert die Deckkraft des Schattens, feOffset ist selbsterklärend.
Wiederverwendung der svg :
Um dasselbe svg path mehrmals zu verwenden, könnten Sie das Element path innerhalb des Elements defs definieren und mehrfach mit dem Element use verwenden, wie im folgenden Beispiel gezeigt.
Sie können span für den blauen Rahmen anstelle des Rahmens für p element verwenden, wenn der Rahmen größer als das Element sein soll. Außerdem müssen Sie die Positionen anpassen.
Dies funktioniert nur auf weißem Hintergrund.
Sie können auch SVG
Wenn Sie dieses Design mit einem einzelnen Element erstellen möchten, können Sie möglicherweise Pseudoelemente verwenden, um beispielsweise ein Skew zu verwenden, um das untere Dreieck sowie einen Rahmen rechts auf diesen Elementen zu erstellen um den blauen Abschnitt zu erstellen.
Eine kurze Demo kann unten gesehen werden:
Tags und Links html css css3 css-shapes