actually here on enter image description here

I can’t understand how you can make a self-stretching button with such arrows on the sides (I tried to make just solid arrows, but this does not suit me, I need it with such a strip along the contour), as well as strips at the top and bottom of the button (they disappear to the edge center brightest

  • 3
    It’s just that you don’t do this with styles; - Arsen

1 answer 1

You can do this:

div { position: relative; display: inline-block; padding: 0 60px; height: 27px; line-height: 27px; vertical-align: middle; color: white; background: url(https://i.stack.imgur.com/CQPcT.jpg) repeat-x 0 0; } div:before { content: ''; position: absolute; top: 0; left: 0; width: 60px; height: 27px; background: url(https://i.stack.imgur.com/SyKbw.png) no-repeat left -10px top -6px; } div:after { content: ''; position: absolute; top: 0; right: 0; width: 60px; height: 27px; background: url(https://i.stack.imgur.com/SyKbw.png) no-repeat right -12px top -6px; } 
 <div>la-la</div> <div>ooo la-la!</div>

You can add stripes at the top and bottom separately using liner-gradient positioned absolutely.

  • 2
    as always, the answer is good - Alexandr_TT