AntiMuffin AntiMuffin - 21 days ago 6
CSS Question

CSS3 - Style a span like an Square-Arrow

i was tired to style a simple span with different texts inside (Text, Big Text, ..) to an Square-Arrow (see Picutre).

Square-Arrow

I have tried this by using a simple background, an Border an an Border-Image. But no solution has worked as propper. By using a background you will get problems if the text becomes larger, because of the strech. By using an Border you cant get that arrow/triangle on the right side. An the Border-Image gave me an creepy result...

The biggest problem on my side is the dynamic text. I have to set different texts with different length to the span. So if i have an bigger Text the the it should not strech the hole background, because thats looks very creepy.

Big Text

Are there some tricks or do you have some tipps to get an good solution?

Thanks,
Kevin

Answer

You can use a single ::after pseudo-element to create this effect.

The clever part is using transform: rotate(45deg); to turn the pseudo-element 45 degrees, which creates the square arrow.

.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>