这是一道前端开发中常常被问到的基础问题，该如何画一个三角形？该如何画一个圆？被问到的时候，可能在你脑海里飘过的就是“我好像在哪里看过，但是记不得了”，我们往往觉得很简单的问题，往往却被面试官问到脸红、紧张。下面就来说说利用css画出各种基本图形的代码。
1、画圆
画圆，我们可以利用CSS3中的border-radius方法具体使用是将一个四方形设置上等宽等高后，再去设置边框的弧度为宽高的一半
[cc lang=”css”].circle{
width: 50px;
height: 50px;
border-radius: 25px;
background: blue;
}[/cc]
2、画三角形：
思路是将某两个边框设置为透明，然后设置三角形底边的边框颜色以及高度即可
[cc lang=”css”]//向上
.triangle-up{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 20px solid red;
}
//向左
.triangle-left{
width: 0;
height:0;
border-bottom: 20px solid transparent;
border-top: 20px solid transparent;
border-right: 20px solid blueviolet;
}
//等边三角形，底边等于左右边的和
.triangle{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
//直角三角形，四边形的相邻两边的边框设为一样的宽度，一边透明，一边有颜色
.triangle-90{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-bottom: 50px solid maroon;
}
[/cc]
3、平行四边形
只需要使用ccs中的扭曲属性skew即可实现，给他角度
[cc lang=”css”].css_skew{
width: 100px;
height: 80px;
background: mediumseagreen;
transform: skew(20deg);
margin-left: 20px;
}[/cc]
以下是课外题，感兴趣的可以研究下：
4、五角星
[cc lang=”css”]#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: ”;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: ”;
}[/cc]
5、爱心
[cc lang=”css”]#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: “”;
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
} [/cc]