纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

转自：https://www.cnblogs.com/ming1025/p/7363074.html

今天在css-tricks上看到一篇文章，那篇文章让我不禁心头一震，强大的CSS啊，居然能画出这么多基本的图形。图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性，所以在你打开这篇文章的时候，我希望你用的是firefox或者chrome，当然IE也能看一部分的。那好，下面就一起来看看我们是如何用纯CSS来画这些图形的。

1 上三角

triangle-up {
     width: 0;
     height: 0;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 100px solid red;
 }

2 下三角

#triangle-down {
     width: 0;
     height: 0;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-top: 100px solid red;
 }

3 省略号
width:70%;

	white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    vertical-align: middle;