Erstellen Sie skalierbare Wegweiser mit HTML, CSS und SVG

Question

Ich möchte einen Knopf in Form eines Verkehrsschildes (ein Rechteck mit einer Spitze) erstellen.

_______
|       \
|_______/

Ich möchte dynamisch Text in ein Logo schreiben, wobei jeder Text eine andere Länge hat. Wenn ich dies versuche und nur die Grafik als Hintergrundgrafik verwende, werden die Pfeile entsprechend skaliert und komprimiert/gedehnt. Fügen Sie den Text also in ein normales Div ein und verwenden Sie CSS :after, um den Pfeil als SVG anzuhängen. Der Pfeil sollte vollständig ausgefüllt sein, d. h. ich muss mich nicht mit Framing-Problemen befassen. (Ich habe das SVG zur besseren Sichtbarkeit schwarz gelassen) Mein erstes Problem ist, dass der Pfeil immer im Block ist und nicht dahinter. Ich habe dieses Problem mit position:absolute; gelöst. Die weitere Feinabstimmung schlug jedoch fehl, da ich die Position nicht anhand des Endes der left:- und right:-Blöcke positionieren konnte

Frage:

• Wie positioniere ich es so, dass das Dreieck immer genau am Ende der Box anschließt? (Kein Weiß in der Mitte)

• So skalieren Sie SVG basierend auf der Größe (Höhe) der Box. (damit die Kanten passen) (evtl. auch unter Berücksichtigung der Polsterung)

Oder bin ich mit dem After-Ansatz völlig auf dem falschen Weg und soll ich den Pfeil (als SVG-Datei) direkt im HTML nach dem Text anhängen (der Text wird mit eingeschlossen) und alles mit umschließen? Aber eigentlich möchte ich das vermeiden und das Einfügen per CSS wäre besser. Aber wenn dies ein nützlicherer Weg ist, bin ich damit einverstanden.

.querverweis{
    background-color: #005000;
    color: #ffffff;
    display: inline-block;
     margin: 10px  
     margin-left: -10px 
}

.querverweis:after {
  content:  url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='40' viewBox='0 0 66 100' xml:space='preserve'%3E%3Cpath d='M0 0 L66 50 L0 100 L0 0' style='fill=rgb(0,0,0)'/%3E%3C/svg%3E%0A");   
  position: absolute; 
}

<div class="querverweis">Test</div>

Answer 1

正如 A Haworth 提到的，剪辑路径可能更简单。为此，请在按钮右侧添加一些 padding ，以便始终为箭头所在的位置留出空间，然后将 clip-path 整个元素添加到

.querverweis {
  position: relative;
  background-color: #005000;
  color: #ffffff;
  display: inline-block;
  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
  clip-path: polygon(0% 0%, calc(100% - 1rem) 0, 100% 50%, calc(100% - 1rem) 100%, 0% 100%);
}

Test




Test with more text




Test with multi-line text