大佬们，求帮助啊

请问有人知道怎么用css画出8分之1圆来的吗？
跪谢

<!DOCTYPE html>
<html>
<head>
<title>CSS等分圆</title>
<meta charset="utf-8">
<style type="text/css">
.circle-left{
width: 100px;height: 200px;
border-radius: 0px 100px 100px 0px;
position: absolute;
right: 0;
transform-origin: 0 50%;
}
.circle-right{
width: 100px;height: 200px;
border-radius: 100px 0px 0px 100px ;
position: absolute;
right: 0;
transform-origin: 100% 50%;
}
#circle0{
width: 200px;height: 200px;
border-radius: 100px;background-color: yellowgreen;
position: relative;
}
#circle2{
background-color: #70f3ff;
}
#circle3{
background-color: #ff461f;
transform: rotate(45deg);
}
#circle4{
background-color: #bce672;
transform: rotate(90deg);
}
#circle5{
background-color: #ffffff;
transform: rotate(135deg);
}
#circle6{
background-color: #3b2e7e;
transform: rotate(180deg);
}
#circle7{
background-color: #ff2121;
transform: rotate(225deg);
}
#circle8{
background-color: #16a951;
transform: rotate(270deg);
}
#circle9{
background-color: #e0eee8;
transform: rotate(315deg);
}
#left{
clip: rect(0px 100px 200px 0px);
position: absolute;
right: 0px;
width: 100px;
height: 200px;
overflow: hidden;
}
#right{
clip: rect(0px 100px 200px 0px);
position: absolute;
left: 0px;
width: 100px;
height: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="circle0">
<div id="left">
<div class="circle-left" id="circle2"></div>
<div class="circle-left" id="circle3"></div>
<div class="circle-left" id="circle4"></div>
<div class="circle-left" id="circle5"></div>
</div>
<div id="right">
<div class="circle-right" id="circle9"></div>
<div class="circle-right" id="circle8"></div>
<div class="circle-right" id="circle7"></div>
<div class="circle-right" id="circle6"></div>
</div>
</div>
</body>
</html>

不感兴趣

开通SVIP免广告

上面那个正好是八等分圆

可以

欢迎进来一起学习交流讨论

<!DOCTYPE html>
<html>
<head>
<title>八分之一个圆</title>
<meta charset="utf-8">
<style type="text/css">
div{
width:500px;
height:500px;
border-radius:50%;
background:orange;
-webkit-clip-path: polygon(50% 0, 50% 50%, 100% 0);
clip-path: polygon(50% 0, 50% 50%, 100% 0);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！

5回复贴，共1页

<<返回css吧

分享到:

日	一	二	三	四	五	六