基于今天的面试问题“使用CSS画一个三角形”,特作此总结。
参考链接:http://www.jb51.net/css/41448.html
图形包括基本的矩形,圆形,椭圆,三角形,多边形,也包括一些复杂的爱心,钻石,阴阳八卦等。
1.正方形
#square{
width:100px;
height:100px;
background:red;
}
2.长方形
#rectangle{
width:200px;
height:100px;
background:red;
}
3.圆形
#circle{
width:100px;
height:100px;
background:red;
border-radius:50px;
/*以下为兼容*/
-moz-border-radius:50px;
-webkit-border-radius:50px;
}
4.椭圆
#oval{
width:200px;
height:100px;
background:red;
border-radius:100px / 50px;/*/前面的值设置元素圆角的水平方向半径,后面的值设置垂直方向的半径*/
}
5.上三角
#triangle-up{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid red;
}
6.下三角
#triangle-down{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:100px solid red;
}
7.左三角
#triangle-left{
width:0;
height:0;
border-top:50px solid transparent;
border-right:100px solid red;
border-bottom:50px solid transparent;
}
8.右三角
#triangle-right{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-left:100px solid red;
}
9.左上三角
#triangle-topleft{
width:0;
height:0;
border-top:100px solid red;
border-right:100px solid transparent;
}
10.右上三角
#triangle-topright{
width:0;
height:0;
border-top:100px solid red;
border-left:100px solid transparent;
}
11.左下三角
#triangle-bottomleft{
width:0;
height:0;
border-bottom:100px solid red;
border-right:100px solid transparent;
}
12.右下三角
#triangle-bottomright{
width:0;
height:0;
border-bottom:100px solid red;
border-left:100px solid transparent;
}
13.平行四边形
#parallelogram{
width:150px;
height:100px;
margin-left:20px;
-webkit-transform:skew(20deg);
-moz-transform:skew(20deg);
-o-transform:skew(20deg);
background:red;
}
14.梯形
#trapezoid{
width:100px;
height:0;
border-bottom:100px solid red;
border-left:50px solid transparent;
border-right:50px solid transparent;
}