<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css 扇形</title>
<style>
/*参考：https://blog.csdn.net/a5534789/article/details/80102048*/
* {
margin: 0;
padding: 0;
}
.pie {
position: relative;
margin: 1em auto;
width: 32em;
height: 32em;
border-radius: 50%;
list-style: none;
overflow: hidden;
/*background: green;*/
}
.slice {/*设置定位及转换原点。*/
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0 100%;/*转换原点设在圆心处。*/
}
.slice-one {
transform: rotate(30deg) skewY(-30deg);
background: black;
}
.slice-two {
transform: rotate(-30deg) skewY(-30deg);
background: yellow;
}
.slice-three {
transform: rotate(-90deg) skewY(-30deg);
background: black;
}
.slice-four {
transform: rotate(-150deg) skewY(-30deg);
background: yellow;
}
.slice-five {
transform: rotate(-210deg) skewY(-30deg);
background: black;
}
.slice-six {
transform: rotate(-270deg) skewY(-30deg);
background: yellow;
}
</style>
</head>
<body>
<ul class='pie'>
<li class='slice-one slice'></li>
<li class='slice-two slice'></li>
<li class='slice-three slice'></li>
<li class='slice-four slice'></li>
<li class='slice-five slice'></li>
<li class='slice-six slice'></li>
</ul>
</body>
</html>
