前端复习(1)CSS图形
画三角形
html
<div class="triangle"></div>
css
.triangle{
width: 0;
height: 0;
border-left:50px solid blue;
border-right:50px solid green;
border-top:50px solid yellow;
border-bottom:50px solid red;
}
得以下结果![](https://images2018.cnblogs.com/blog/1231057/201809/1231057-20180911124123048-1650964117.png)
![](https://images2018.cnblogs.com/blog/1231057/201809/1231057-20180911124123048-1650964117.png)
然后利用transparent将其他3个边变透明即可,例
.triangle{
width: 0;
height: 0;
border:50px solid transparent;
border-bottom:50px solid red;
}
得到三角形
(其他方向同理)
![](https://images2018.cnblogs.com/blog/1231057/201809/1231057-20180911124458376-784571015.png)
画椭圆
html
<div class="oval"></div>
css
.oval{
width: 200px;
height: 100px;
background: red;
-webkit-border-radius: 100px/50px;
moz-border-radius:100px/50px;
border-radius: 100px/50px;
}
画梯形
有前面三角形的画法
![](https://images2018.cnblogs.com/blog/1231057/201809/1231057-20180911124123048-1650964117.png)
.trapezoid{
width: 0;
height: 0;
border-left:50px solid blue;
border-right:50px solid green;
border-top:50px solid yellow;
border-bottom:50px solid red;
},
如果我们此时把宽带设置为50px的话
![](https://images2018.cnblogs.com/blog/1231057/201809/1231057-20180911232723130-925013353.png)
这样梯形其实就出来了
.trapezoid {
width: 50px;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid transparent;
border-bottom: 50px solid red;
}
慢慢的努力的成为一个好的前端.