html li显示正三角形状
时间: 2023-05-21 09:03:51 浏览: 59
可以使用CSS的伪元素:before或:after来实现正三角形状的显示,具体代码如下:
li:before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid black;
margin-right: 5px;
}
这段代码会在每个li元素前面添加一个黑色的正三角形。
相关问题
html li显示倒三角形状
可以使用CSS中的伪元素:before或:after来实现,具体代码如下:
li:before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 5px 5px 5px;
border-color: transparent transparent #000 transparent;
margin-right: 5px;
}
这样就可以在li标签前面添加一个倒三角形状的图标了。
html li显示其他形状
可以使用CSS中的list-style-type属性来改变li元素的标记形状,例如使用disc表示实心圆点,square表示实心正方形,circle表示空心圆点等等。具体的代码如下:
ul {
list-style-type: square; /* 改变li元素的标记形状为实心正方形 */
}
li {
/* 其他样式 */
}
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)