html_css_四分之一圆

最新推荐文章于 2023-07-17 08:51:54 发布

原创最新推荐文章于 2023-07-17 08:51:54 发布 · 3.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #四分之一圆

HTML/H5 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何使用CSS实现四分之一圆的效果。通过设置`div`的`position: absolute`并调整`margin`使其居中，再利用`border-radius`属性，分别创建左上和右下四分之一圆。同时，文章还提及了绝对定位的相关知识点，包括其相对于最近已定位父元素的定位原则，以及相对定位在作为绝对定位容器时的作用。

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

需求:

效果:

代码:

<!DOCTYPE html>
<html>
<head>
	<title>四分之一圆</title>
	<style type="text/css">
		.class_div_bg {
			width: 400px;
			height: 200px;
			background-color: #ccc;
			/*设置div垂直居中*/
			position: absolute;
			margin: auto;
			/*注意: top bottom left right四者数值相同即可*/
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}
		.class_div_arc1 {
			width: 50px;
			height: 50px;
			background-color: #fc0;
			/*四分之一圆*/
			border-radius: 0 0 100% 0;
			/*定位*/
			position: absolute;
			left: 0;
			top: 0;
		}
		.class_div_arc2 {
			width: 50px;
			height: 50px;
			background-color: #fc0;
			/*四分之一圆*/
			border-radius: 100% 0 0 0;
			/*定位*/
			position: absolute;
			right: 0;
			bottom: 0;
		}
	</style>
</head>
<body>
<div class="class_div_bg">
	<div class="class_div_arc1"></div>
	<div class="class_div_arc2"></div>
</div>
</body>
</html>

核心内容:

1. div屏幕居中:

           /*设置div垂直居中*/
           position: absolute;
           margin: auto;
           /*注意: top bottom left right四者数值相同即可*/
           top: 0;
           bottom: 0;
           left: 0;
           right: 0;

2. CSS画四分之一圆

border-radius: 100% 0 0 0; // 左上1/4圆

border-radius: 0 0 100% 0; // 右下1/4圆

border-radius: 左上右上右下左下

3. 绝对定位相关知识点

3.1 绝对定位的元素的位置相对于最近的已定位父元素，

如果元素没有已定位的父元素，那么它的位置相对于<html>:

3.2 相对定位元素经常被用来作为绝对定位元素的容器块。

3.3 HTML元素的默认没有定位，元素出现在正常的流中。