今天画个梯形

寒酥吖随记

已于 2023-12-13 16:48:42 修改

阅读量78

点赞数

文章标签：前端

于 2023-12-13 16:42:16 首次发布

本文链接：https://blog.csdn.net/m0_48426077/article/details/134975186

版权

方法一：
border+transparent

元素
<div id="myDIV">
元素样式
	width:200px;
	background-color:coral;
	color:white;
	border-left:100px solid transparent;
	border-right:100px solid transparent;
	border-bottom:200px solid red;
	border-top:200px solid transparent;

缺点：
在梯形内不可写内容。
想在梯形中显示文字，可采用方法二的办法。

方法二： transform属性

元素
<div class='div2' ></div>
样式
.div2{
		width:100px;
		height:100px;
		background:green;
		transform:perspective(0.5em)rotateX(3deg);
	}