在写网页的过程中，有时我们需要用到一些简单的图片但是手头又没有合适的，我们其实可以自己来写，下面我就简单的介绍几个例子：
1.上三角
Triangle Up
#triangle-up {
width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }
2.下三角
Triangle Down
#triangle-down {
width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; }
3.左三角
Triangle left
#triangle-left {
width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; }
4.右三角
Triangle right
#triangle-right {
width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; }
5.左上直角
Triangle Top Left
#triangle-topleft {
width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; }
6.右上直角
Triangle Top Right
#triangle-topright { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; }
7.左下直角
Triangle Bottom Left
#triangle-bottomleft {
width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent; }
8.右下直角
Triangle Bottom Right
#triangle-bottomright {
width: 0; height: 0; border-bottom: 100px solid red; border-left: 100px solid transparent; }
最后来一个稍微复杂一点点的
十字架
Cross
#cross {
background: red; height: 100px; position: relative; width: 20px; } #cross:after { background: red; content: ""; height: 20px; left: -40px; position: absolute; top: 40px; width: 100px; }