1、绘制三角形
用 css 画三角形主要是利用边框 border 来设置的，是不是有点迷惑？我们先试试把 div 四条边框设置成不同的颜色看看会出现什么效果：
<head>
<style>
.triangle {
width: 50px;
height: 50px;
border-bottom: 200px solid #ce7486;
border-left: 200px solid #3898b1;
border-right: 200px solid darkgoldenrod;
border-top: 200px solid #8361c9;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
可以看出边框是呈现一个三角形的趋势往内推，那么如果我们只想要一个向上趋势的三角形该怎么做呢？很简单，把盒子的宽高设为0，其它角度的边框颜色设置为透明就可以了，如下：
<head>
<style>
.triangle {
width: 0;
height: 0;
border-bottom: 200px solid #ce7486;
border-left: 200px solid transparent;
border-right: 200px solid transparent;
border-top: 200px solid transparent;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
还可以绘制直角三角形：
<style>
.triangle {
width: 0;
height: 0;
border-bottom: 200px solid #ce7486;
border-left: 200px solid #ce7486;
border-right: 200px solid transparent;
border-top: 200px solid transparent;
}
</style>
2、绘制箭头
利用边框加上旋转，我们设置两个相邻的边框，然后做 45 度的旋转，这样就可以得到不同类型的箭头了。
<head>
<style>
.triangle {
width: 100px;
height: 100px;
border-left: 5px solid darksalmon;
border-top: 5px solid darksalmon;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
转 45 度：
<style>
.triangle {
width: 100px;
height: 100px;
border-left: 5px solid darksalmon;
border-top: 5px solid darksalmon;
transform: rotate(45deg);
}
</style>
3、绘制圆
绘制圆主要是使用 css3 的属性 border-radius
<head>
<style>
.circle {
width: 100px;//宽高要相等，否则是椭圆
height: 100px;
border-radius: 50%;
background-color: #ce7486;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
绘制圆环：
<style>
.circle {
width: 100px;
height: 100px;
border: 2px solid #ce7486;
border-radius: 50%;
background-color: white;
}
</style>
4、画一条 0.5px 的线
直接设置 0.5px ，在不同的浏览器会有差异，谷歌浏览器直接把 0.5px 四舍五入变成了 1px.
可以设置成 1px,再使用缩放功能。
<head>
<style>
.outline {
height: 1px;
background-color: black;
transform: scaleY(0.5);
}
</style>
</head>
<body>
<div class="outline"></div>
</body>