CSS 实现半圆环的两种方式

最新推荐文章于 2025-03-20 16:32:46 发布

颓废的前端

最新推荐文章于 2025-03-20 16:32:46 发布

阅读量1.4k

点赞数

文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/Chen_Z_H_/article/details/129381443

版权

本文介绍了两种使用CSS实现半圆环效果的方法，详细解析了实现过程，适合前端开发者学习和参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：

<div style="
    width: 50px;
    height: 50px;
    border: 13px solid orange;
    border-radius: 50px;
    clip-path: polygon(50% 0%, 100% 0%, 100% 3600%, 50% 50%);
    -webkit-clip-path: polygon(50% 0%, 100% 0%, 100% 3600%, 50% 50%);
"></div>

在这里插入图片描述

方法二：

</head>
	<style>
	    .circle {
	        position: relative;
	        box-sizing: border-box;
	    }
	    
	    .big {
	        width: 140px;
	        height: 140px;
	        border-radius: 50%;
	        position: absolute;
	        margin: auto;
	        /*以下五个属性为水平垂直居中的方法*/
	        left: 0;
	        top: 200px;
	        right: 0;
	        bottom: 0;
	        box-sizing: border-box;
	    }
	    
	    .small {
	        width: 136px;
	        height: 136px;
	        border: 10px solid #9DDBE8;
	        border-radius: 50%;
	        position: absolute;
	        margin: auto;
	        /*以下五个属性为水平垂直居中的方法*/
	        left: 0;
	        top: 200px;
	        right: 0;
	        bottom: 0;
	        box-sizing: border-box;
	        border-bottom-color: transparent;
	    }
	</style>
	</head>

<body>
	<div class="circle">
	    <div class="big"></div>
	    <div class="small"></div>
	</div>
</body>