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

Popular posts from this blog

formatting - SAS SQL Datepart function returning odd values -

c++ - Apple Mach-O Linker Error(Duplicate Symbols For Architecture armv7) -

php - Yii 2: Unable to find a class into the extension 'yii2-admin' -