纯css编写任意角度的多个扇形

使用css来绘制任意角度的扇形，先来看效果如下

下面来介绍如何用代码来实现，纯css实现，逻辑简单，一看就会。

	<!-- html代码，没什么好说的 -->
	<ul class="container">
		<li class="li-1"></li>
		<li class="li-2"></li>
		<li class="cover"></li>
	</ul>

下面来进行css代码讲解：

		.container {
			list-style: none;
			width: 400px;
			height: 400px;
			border-radius: 200px;	// 父元素容器自身要是一个圆形
			overflow: hidden;	// 因为里面的扇形实际上是取了子元素的一部分，所以子元素溢出部分要隐藏
			position: relative;	// 使用定位来确定子元素旋转的中心点
		}
		.li-1 {
			position: absolute;	// 扇形子元素都要是绝对定位
			width: 20000%;	// 宽高设置的越大，扇形可以张开的角度就越大
			height: 20000%;
			top: -19950%;	// 使用绝对定位将子元素旋转的中心点（这里是子元素的右下角）固定在父元素的中心点
			left: -19950%;
			background-color: violet;	// 背景颜色随自己喜欢就好了
			// 这里是设置子元素旋转和变形的中心点，这两个值可以自己调整，不会的话可以看看css的transform
			transform-origin: 100% 100%;	
			// 说的是任意角度，事实上最大也就可以张开89°，不过没关系，如果一个不够，那就用两个拼接起来
			transform: skewY(-89deg);	
		}
		.li-2 {
			position: absolute;
			width: 20000%;
			height: 20000%;
			top: 50%;
			left: 50%;
			background-color: darkviolet;
			transform-origin: 0 0;	// 两个子元素的旋转中心点是不一样的，这个可以自己调整试试感觉
			transform: rotate(-16deg) skewY(-56deg);	// 可以将扇形进行旋转和拉伸变形，数值可以自己调整看效果
		}
		// 这个子元素就是覆盖扇形中心，将扇形变成环形
		.cover {
			position: absolute;
			width: 60%;
			height: 60%;
			top: 20%;
			left: 20%;
			background-color: #fff;	// 背景颜色根据实际场景来设置
			border-radius: 50%;
		}