css实现半圆（上下左右半圆）_css半圆

作者：AllinToyou | 2024-03-22 01:00:26

踩

css半圆

1.右半圆

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				background-color: aqua;
			}
			.circle{
				width: 50px;
				height: 100px;
				border-radius: 0 50px 50px 0;
				line-height: 100px;
			}
		</style>
	</head>
	<body>
		<h3>这是一个右半圆</h3>
		<div class="circle"></div>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

实现效果：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210511094206478.png

2.左半圆

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				background-color: aqua;
			}
			.circle{
				width: 50px;
				height: 100px;
				border-radius: 50px 0 0 50px;
				line-height: 100px;
			}
		</style>
	</head>
	<body>
		<h3>这是一个左半圆</h3>
		<div class="circle"></div>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

实现效果：
在这里插入图片描述

3.上半圆

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				background-color: aqua;
			}
			.circle{
				width: 100px;
				height: 50px;
				border-radius: 50px 50px 0 0;
				line-height: 50px;
			}
		</style>
	</head>
	<body>
		<h3>这是一个上半圆</h3>
		<div class="circle"></div>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

实现效果：
在这里插入图片描述

4.下半圆

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				background-color: aqua;
			}
			.circle{
				width: 100px;
				height: 50px;
				border-radius:0 0 50px 50px ;
				line-height: 50px;
			}
		</style>
	</head>
	<body>
		<h3>这是一个下半圆</h3>
		<div class="circle"></div>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

实现效果：
在这里插入图片描述

5.其他方法！！！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				background-color: aqua;
			}
			.circle{
				position:absolute; /*clip 属性剪裁绝对定位元素。也就是说，只有 position:absolute 的时候才是生效的。 */
				width: 100px;
				height: 100px;
				border-radius: 50px;
				clip: rect(0px 50px 100px 0px); /*唯一合法的形状值是：rect (top, right, bottom, left)*/
			}
			.circle{
				position:absolute; /*clip 属性剪裁绝对定位元素。也就是说，只有 position:absolute 的时候才是生效的。 */
				width: 100px;
				height: 100px;
				border-radius: 50px;
				clip: rect(0px 50px 100px 0px); /*唯一合法的形状值是：rect (top, right, bottom, left)*/
			}
		</style>
	</head>
	<body>
		<div style="position: relative;">
			<div class="circle"></div>
		</div>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

实现效果：
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/284095