css实现半圆（上下左右半圆）
程序员文章站
2022-06-15 13:39:25
...
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>
实现效果：
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>
实现效果：