一. 梯形
1.1 画一个正方形(边长100px)边框,边框宽度为10px
width: 100px;
height: 100px;
border: 10px solid red;
效果图:
这里的border平均分配如下图所示:
1.2 画出梯形
1.2.1 思路一
将其余三条边隐藏即可
简洁写法
width: 100px;
height: 100px;
border: 10px solid transparent;
border-top-color: red;
节省空间写法 !!!不写bottom!!! 推荐
width: 100px;
height: 100px;
border-top: 10px solid red;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
1.2.2 思路二
width: 100px;
height: 0;
border-top: 100px solid red;
border-right: 40px solid transparent;
倒直角梯形
二. 三角形
根据梯形的原理,把width设置为0即可
**设置不同三角形的原理:**border 设置的都是三角形的高,对于下图而言border-top是三角形的高 border-left和border-right组成三角形的底边 根据三角形的底边与高的长度,这样就可以随意设置
2.1 等腰直角三角形
width: 0;
width: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
2.2 等边三角形
width: 0;
width: 0;
border-top: 173px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
2.3 底边和高相同的等腰三角形
如下图所示
width: 0;
width: 0;
border-top: 200px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
三. 平行四边形
width: 150px;
height: 100px;
margin-left: 100px;
transform: skew(-30deg);
background: #000;
平行四边形的高是100px