CSS3 - Style eine Spanne wie ein Quadrat-Pfeil

Question

Ich war müde, um eine einfache Spannweite mit verschiedenen Texten (Text, Big Text, ..) zu einem Square-Arrow (siehe Picutre) zu stylen.

Ich habe versucht, dies durch einen einfachen Hintergrund verwenden, eine Grenze ein ein Border-Bild. Aber keine Lösung hat so gut funktioniert. Bei Verwendung eines Hintergrundes treten Probleme auf, wenn der Text aufgrund der Dehnung größer wird. Wenn Sie einen Rahmen verwenden, können Sie diesen Pfeil/Dreieck nicht auf der rechten Seite sehen. Ein das Border-Image gab mir ein gruseliges Ergebnis ...

Das größte Problem auf meiner Seite ist der dynamische Text. Ich muss verschiedene Texte mit unterschiedlicher Länge zur Spanne setzen. Wenn ich also einen größeren Text habe, sollte der Lochhintergrund nicht verlängert werden, denn das sieht sehr gruselig aus.

Gibt es einige Tricks, oder haben Sie ein paar tipps haben eine gute Lösung zu bekommen?

Danke, Kevin

Answer 1

Sie können ein einzelnes ::after Pseudoelement verwenden erscheinen, diesen Effekt zu erstellen.

Der clevere Teil verwendet transform: rotate(45deg);, um das Pseudo-Element um 45 Grad zu drehen, was den quadratischen Pfeil erzeugt.

.arrow { 
 
display: inline-block; 
 
position: relative; 
 
margin: 0 36px 36px 0; 
 
padding: 6px 0 6px 6px; 
 
font-size: 18px; 
 
line-height: 18px; 
 
font-family: arial, helvetica, sans-serif; 
 
border: 2px solid rgb(0,0,0); 
 
border-right: none; 
 
border-radius: 5px 0 0 5px; 
 
box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4); 
 
} 
 

 
.arrow::after { 
 
content:''; 
 
position: absolute; 
 
display: inline-block; 
 
top: 3px; 
 
right: -12px; 
 
width: 22px; 
 
height: 22px; 
 
border-top: 2px solid rgb(0,0,0); 
 
border-right: 2px solid rgb(0,0,0); 
 
box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4); 
 
transform: rotate(45deg); 
 
}

<span class="arrow">Text</span> 
 
<span class="arrow">Big Text</span> 
 
<span class="arrow">Very Big Text</span> 
 
<span class="arrow">Quite Spectacularly Big Text</span> 
 
<span class="arrow">Phenomenally, Astoundingly, Almost Preposterously Big Text</span>

Answer 2

können Sie :before und :after verwenden, um ein Dreieck zu zeichnen. Einer wird schwarz sein und der zweite weiß, ein bisschen kleiner.

Hier ist ein Snippet

body{ 
 
padding:30px; 
 
} 
 
span { 
 
    font:20px/20px arial,sans-serif; 
 
    padding:10px; 
 
    border:1px solid black; 
 
    background:white; 
 
    position:relative; 
 
} 
 
span:after { 
 
content: ""; 
 
display: block; 
 
width: 0; 
 
height: 0; 
 
border-style: solid; 
 
border-width: 22.5px 0px 22.5px 34px; 
 
border-color: transparent transparent transparent #fff; 
 
position: absolute; 
 
top: 0; 
 
right: -34px; 
 
margin: 0; 
 
padding: 0; 
 
box-sizing: border-box; 
 
} 
 
span:before { 
 
content: ""; 
 
display: block; 
 
width: 0; 
 
height: 0; 
 
border-style: solid; 
 
border-width: 23.5px 0px 23.5px 35px; 
 
border-color: transparent transparent transparent #000; 
 
position: absolute; 
 
top: -1px; 
 
right: -35px; 
 
margin: 0; 
 
padding: 0; 
 
box-sizing: border-box; 
 
z-index: -1; 
 
}

<div><span>Hello, this is my text</span></div>

Das ist nur ein Test war, habe ich in jedem Browser auf Kompatibilität überprüfen did'nt, aber es ist eine Möglichkeit, es zu tun.

Wenn die Höhe immer die gleiche ist, können Sie auch ein Bild verwenden können und es dank einer :after