CSS3 Transform to Trapezoid

▼魔方 西西 提交于 2019-12-01 08:43:58

问题


I need to create a CSS3 trapezoid using a div element. To make it crystal clear what I'm doing I've created a basic visual below; green is a normal rectangular div while the red represents the parts I need to change the div to in order to achieve the trapezoid shape I need.

Provided that we're editing .trapezoid {} CSS class what are the rules I need to achieve the shape? (Obviously the color is just reference).


回答1:


Try this:

.trapezoid { transform: perspective(600px) rotateY(-45deg) scale(1.1,1.1); }

Adjust values as necessary.



来源:https://stackoverflow.com/questions/23481232/css3-transform-to-trapezoid

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!