用css画三角形并附加评分_css 三角形套数字-优快云博客

本文介绍了一种使用CSS边框属性来绘制不同方向三角形的方法，包括向上、向下、向左、向右以及位于角落的三角形。这些技巧对于创建星型评分等UI元素非常实用。

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;
}