How to align the text in a div so that it is not tilted (without setting the p element of the tranform: skew property)? I'm trying to assign transform: none; or transform: unset; Does not help.

div { transform:skew(40deg); width: 50%; background: yellow; text-align:center; } 
 <div><p>ะะตะบะพั‚ะพั€ั‹ะน ั‚ะตะบัั‚</p><div>

  • one
    No You do not just need to reset to zero, but transform in the opposite direction. - websnap
  • Sometimes you will meet such questions ... Damn, this is not mine, but explain what it is necessary to align the text so as not to ask "p" tranform: skew ... well, if it is so necessary, then take a pouch and shove both "p" and "div", to be parallel and transform only the div /// - Air

2 answers 2

Example

 div { position: relative; width: 50%; text-align: center; } div:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: yellow; transform: skew(40deg); z-index: -1; } 
 <div> <p>ะะตะบะพั‚ะพั€ั‹ะน ั‚ะตะบัั‚</p> </div>

Option with clip-path

Browser Support clip-path - caniuse.com

For IE, you can use the clip-path polyfill

 div { position: relative; width: 50%; text-align: center; background: yellow; -webkit-clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%); clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%); } 
 <div> <p>ะะตะบะพั‚ะพั€ั‹ะน ั‚ะตะบัั‚</p> </div> 

      div { transform:skew(40deg); width: 50%; background: yellow; text-align:center; } div p{ transform: skew(-40deg); } 
     <div><p>ะขะตะบัั‚</p></div>

    • Do you read the assignment at all? - websnap
    • 2
      And how does your answer differ from a wrong answer above? - Dan the Hat