用css画三角形并附加评分

CSS三角形绘制方法

（我用的是第七种方法，首先把一个50*50的div定位在大div右上角，然后再用一个同样大小或者普通的div套一个span、用span标签顺时针45°得出。）
**今天给大家带来 CSS 三角形绘制方法，这样某评分效果就可以展示了
首先得有一个div（矩形div）**
代码如下:
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、

代码如下:

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

4、

代码如下:

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

5、

代码如下:

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

6、

代码如下:

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

7、

代码如下:

#triangle-bottomleft {    width: 0;    height: 0;    border-bottom: 100px solid red;    border-right: 100px solid transparent;}

8、

代码如下:

#triangle-bottomright {    width: 0;    height: 0;    border-bottom: 100px solid red;    border-left: 100px solid transparent;}