title: CSS3 - Style a span like an Square-Arrow
body: <p>i was tired to style a simple span with different texts inside (Text, Big Text, ..) to an Square-Arrow (see Picutre).</p>
  
  <p><a href="https://i.stack.imgur.com/lxPxy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lxPxy.png" alt="Square-Arrow"></a></p>
  
  <p>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...</p>
  
  <p>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. </p>
  
  <p><a href="https://i.stack.imgur.com/lSxqu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lSxqu.png" alt="Big Text"></a></p>
  
  <p>Are there some tricks or do you have some tipps to get an good solution?</p>
  
  <p>Thanks,
  Kevin</p>