<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>
</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>
京公网安备 11010802035086号