css空心三角形_纯CSS+HTML制作三角形和圆|实心+空心
时间: 2023-07-31 18:08:36 浏览: 96
您好!关于制作纯CSS的空心三角形和圆,可以参考以下代码示例:
空心三角形:
```
<div class="triangle"></div>
<style>
.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid #000;
}
</style>
```
实心三角形:
```
<div class="triangle"></div>
<style>
.triangle {
width: 0;
height: 0;
border-top: 50px solid #000;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
</style>
```
空心圆:
```
<div class="circle"></div>
<style>
.circle {
width: 50px;
height: 50px;
border: 2px solid #000;
border-radius: 50%;
}
</style>
```
实心圆:
```
<div class="circle"></div>
<style>
.circle {
width: 50px;
height: 50px;
background-color: #000;
border-radius: 50%;
}
</style>
```
希望对您有帮助!
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)