CSS3 - Style a span like an Square-Arrow - html

Question

i was tired to style a simple span with different texts inside (Text, Big Text, ..) to an Square-Arrow (see Picutre).
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.
Are there some tricks or do you have some tipps to get an good solution?
Thanks,
Kevin

Answer 1

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>

Answer 2

You can use :before and :after to draw a triangle. One will be black, and the second white on top of it, a bit smaller.
Here is a 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>
That was just a test, I did'nt check in every browser for compatibility, but it's a way to do it.
If the height is always the same, you can also use an image and make it appear thanks to an :after