1. 画三角
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.triangle {
width: 0;
height: 0;
border: solid;
border-width:100px 100px 100px 100px;
border-color:transparent transparent bule transparent;
}
</style>
</head>
<body>
<div class="triangle"></div> </body>
</html>
结果如下
（边框颜色border-color四个值默认的加载方向，top right bottom left）：
宽高为0时：
2. 画一个矩形
把上述的left/right/top/bottom去掉任意一边，然后把颜色都设成蓝色不就行了
.rectangle {
background-color: red;
width: 0;
height: 0;
border: solid;
border-width:0px 100px 100px 100px;
border-color:blue;
}
3. 画一条线
如图所示是一条长200px, 粗0.5px的线。
.line {
width: 0px;
height: 0px;
border: solid;
border-width:0 100px 0.5px 100px;
border-color:red;
}
4. 画一个圆
使用到border-radius.
<!DOCTYPE html>
<html>
<head>
<title>画一个圆，圆心有字</title>
<meta charset="utf-8">
<style type="text/css">
.circle {
width: 100px;
height: 100px;
border: solid 2px;
border-radius: 50px;
/*background-color: red;*/
text-align: center;
line-height: 100px;//这样才能使文字处于圆心处
background: rgba(255, 0, 0, 1)/*设置透明度*/
}
</style>
</head>
<body>
<div class="circle">圆心</div> </body>
</html>
RGB就是红色R+绿色G+蓝色B，RGBA说得简单一点就是在RGB的基础上加进了一个通道Alpha.
语法: 以上R、G、B三个参数，正整数值的取值范围为：0 - 255。
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数| 百分数
A：透明度。取值0~1之间