Hello! Perhaps the question for many is very simple, but still. I'm tired of using the picture, and I want to grow a little. Please tell me how to implement such a geometric shape (it should be adaptive):

enter image description here

  • And what would the content not bend - Ivan Orlov
  • if the answer helped you - mark it with a solution. - Arthur

1 answer 1

This is done using skew :

 * { margin: 0; padding: 0; } div { margin: 20px; padding: 0; position: relative; width: 75px; height: 25px; color: #ffffff; } p { position: absolute; background-color: blue; width: 100%; height: 100%; transform: skew(15deg) } span { position: absolute; width: 100%; height: 100%; text-align: center; line-height: 1.5; } 
 <div> <p></p> <span> Lorem </span> </div>

Option on SVG with the same skew :

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" viewBox="0 0 500 500"> <rect transform="skewX(15)" width="100" height="50"/> <text fill="white" x="35" y="30">Lorem</text> </svg>

  • @Air, Thanks for the edit :)) - Arthur
  • And make another option on svg ... - Air
  • Please ..... - Air
  • @Air, you can try - Arthur
  • I think even need ... - Air