css3 - Skew background image without distortion? -
css3 - Skew background image without distortion? -
i need skew shape of div contains background image, without distorting background image.
right i'm using transform: skew(-25deg)
is possible without distortion?
you need add together background image on kid of skewed element , apply opposite skew child. here's example:
class="snippet-code-css lang-css prettyprint-override">.parent { height: 100px; overflow: hidden; transform: skew(0.5rad, 0); width: 100px; } .child { background: linear-gradient(to right, reddish 0%, bluish 100%); height: 100%; transform: skew(-0.5rad, 0); width: 100%; }
class="snippet-code-html lang-html prettyprint-override"><div class="parent"> <div class="child"> etc. </div> </div>
css3
Comments
Post a Comment