css实现梯形

效果图：

一、使用css实现梯形

html：

<div class="div">
	这是一个梯形
</div>

做法：通过tansform属性的perspective和rotateX，实现梯形（声明的顺序不能错）。
rotateX是将物体以X轴为旋转轴，进行旋转。

css代码如下

.div{
	width:100px;
	height:100px;
	background:green;
	transform: perspective(.5em) rotateX(5deg);
	transform-origin:bottom;
}

本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/8347.html

1、本文系转载，版权归原作者所有，旨在传递信息，不代表看本站的观点和立场。

2、本站仅提供信息发布平台，不承担相关法律责任。

3、若侵犯您的版权或隐私，请联系本站管理员删除。

4、本文由会员转载自互联网，如果您是文章原创作者，请联系本站注明您的版权信息。

上一篇： css 5个动画效果网站

下一篇：使用CSS实现简单的图片切换（轮播图）

相关文章更多 >>

随机网站更多 >>

最新小程序更多>>

最新公众号更多>>

本站声明：本站严格遵守国家相关法律规定，非正规网站一概不予收录。本站所有资料取之于互联网，任何公司或个人参考使用本资料请自辨真伪、后果自负，站三界导航不承担任何责任。在此特别感谢您对站三界导航的支持与厚爱。