0

I'm creating a component using skew transform (for making shape). In order to make the text inside skew is unskewed, I use the reverted deg value However I'm facing with the problem that: when the text is too long, it's gonna be overflow (outside of the box) image here

I've tried with padding, margin and some other ways but still no luck. Do you guys have idea any about this? Many thanks

Link demo:

.container{
    transform: skew(-12deg, 0deg);
    -ms-transform: skew(-12deg, 0deg);
    -webkit-transform: skew(-12deg, 0deg);
    display:inline-block;
    padding: 10px;
    width: 100px;
    margin-left: 25%;
    border-radius: 3px;
    background-color: blue;
    color: black;
}

.inner{
    transform: skew(12deg, 0deg);
    -ms-transform: skew(12deg, 0deg);
    -webkit-transform: skew(12deg, 0deg);
    padding: 0 10px;
}
<div class="container"> <div class="inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div> </div>
akigureum
  • 5
  • 5
  • Maybe this answer has the answer you're searching for? https://stackoverflow.com/questions/17947565/how-to-skew-element-but-keep-text-normal-unskewed – Georgi Atanasov Jul 18 '22 at 07:38
  • Hi @Georgi Atanasov, thank for your reply. Unfortunately, I tried that link too but it doesn't relate to my issue :( – akigureum Jul 18 '22 at 07:46

0 Answers0