html5 css3 将长方形图片 切成 直角梯形显示

html5 css3 将长方形图片 切成 直角梯形显示_第1张图片


效果图如上





skew test





在图片外层做skew的角度变形,通过内层的图片反变形,即加上和外层skew相反的值,做到图片不会跟着变形

通过图片外层div的width,margin,padding属性来控制调整图片显示的多少和位置(这里需要花时间根据图片尺寸慢慢调整)

你可能感兴趣的:(梯形,图片,skew,HTML5,css3)