hidden Css 画出一个扇形，附代码 |扇形|px|width||sector|height|知识科

文章图片

<div class="sector"></div>
.sector{
width: 200px;
height: 200px;
border-radius: 200px;
background-color: deepskyblue;
position: relative;
}
.sector::before{
content: "";
width: 200px;
height: 200px;
position: absolute;
background-color: white;
border-radius: 200px;
/*裁减半圆，再做旋转*/
clip: rect(0px,100px,200px,0);
transform: rotate(-60deg);
}
.sector::after{
content: "";
width: 200px;
height: 200px;
position: absolute;
background-color: white;
border-radius: 200px;
/*裁减半圆，再做旋转*/
clip: rect(0px,200px,200px,100px);
transform: rotate(60deg);
}
方式二
<>
<style>
#demo {
position: relative;
width: 50px;
height: 50px;
overflow: hidden;
}
#circle {
position: absolute;
width: 100px;
height: 100px;
background-color: black;
border-radius: 50%;
}
</style>
<body>
<div id="demo">
<div id="circle"></div>
【hidden Css 画出一个扇形，附代码】</div>
</body>
</>
方式三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css画出一个扇形</title>
<style>
#sector {
width: 0;
height: 0;
border: 100px solid;
border-radius: 100px;
border-color: orangered transparent transparent transparent;
}
</style>
</head>
<body>
<div id="sector"></div>
</body>
</html>

以上关于本文的内容，仅作参考！温馨提示：如遇专业性较强的问题（如：疾病、健康、理财等），还请咨询专业人士给予相关指导!

「辽宁龙网」www.liaoninglong.com小编还为您精选了以下内容，希望对您有所帮助：