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

苏苏哇哈哈

已于 2022-11-10 12:55:47 修改

阅读量1.5w

点赞数 9

分类专栏： css 文章标签： css

于 2021-05-11 09:56:39 首次发布

本文链接：https://blog.csdn.net/qq_48085286/article/details/116641609

版权

css 专栏收录该内容

63 篇文章 6 订阅

订阅专栏

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>

实现效果：
![在这里插入图片描述](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>

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

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>

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

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>

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

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>

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

苏苏哇哈哈

关注

9
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
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;
复制链接

扫一扫