[CSS3学习]画出一个扇形

学习了下CSS3，朋友给出了个题目让用CSS3画出一个扇形

目标：用CSS3画出一个扇形

想法：

1. 先画一个整圆；
2. 用方形div遮挡整圆的右半部分和下半部分；
3. 用一个旋转div遮挡1/4圆，从而使剩下的部分形成扇形。
   

代码：

HTML：

CSS：

*{
	border:0;
	margin:0;
	padding:0;
}

#div1{
	margin:50px;
	width:100px;
	height:100px;
	background:red;
	border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-0-border-radius:50%;
	position:absolute;
	z-index:-1;
}

#div2{
	margin-left:100px;
	margin-top:50px;
	width:50px;
	height:100px;
	background:white;
	position:absolute;
}

#div3{
	margin-left:50px;
	margin-top:100px;
	width:50px;
	height:50px;
	background:white;
	position:absolute;
}

#div4{
	margin-left:14.644661px;
	margin-top:64.644661px;
	width:70.710678px;
	height:70.710678px;
	background:white;
	position:absolute;
	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
}

朋友提醒也可以试试用clip来实现，于是想了下，就用clip裁剪来代替div覆盖，对CSS代码进行了修改，修改后如下：

*{
	border:0;
	margin:0;
	padding:0;
}

#div1{
	margin:50px;
	width:100px;
	height:100px;
	background:red;
	border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-0-border-radius:50%;
	position:absolute;
	z-index:-1;
	clip:rect(0px,50px,50px,0px);
}

#div4{
	margin-left:14.644661px;
	margin-top:64.644661px;
	width:70.710678px;
	height:70.710678px;
	background:white;
	position:absolute;
	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
}

比之前的确实简单了一些，但是这样实现后总觉得自己这种方式感觉有些土，而且是用div覆盖的方法实用度很低，于是上网搜寻了下看看有没有别的方法，发现一种直接通过空div的border来实现的方法，觉得很好，于是自己也动手试试。

实现方式：

1. 画出一个空的div；
2. 将div的画成圆形，并将上边和左边加粗，上色；
3. 通过border-top-left和border-left-top属性，保留左上角1/4圆；
4. 让左边变透明，就得到了1/8圆的扇形。

代码：

HTML：

CSS：

*{
    border:0;
    padding:0;
    margin:0;
}

#div1{
    border-left:10em solid transparent;
    border-top:10em solid red;
    border-style:red dashed dashed dashed;
    -webkit-border-top-left-radius:10em;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topleft:10em;
    -moz-border-radius-topright:0px;
    border-top-left-radius:10em;
    border-top-right-radius:0px;
    width:0em;
    height:0em;
    padding:0;
}

这次实用度上升了，但是有个问题，就是只能画出1/8圆的扇形，如果是类似饼状图任意角度的扇形要怎么画呢？

这次上网搜寻了下饼状图的实现方式，原来是结合了clip、radius和rotate来实现的，朋友的提醒看来用错了地方，接下来进行实现。

实现方法：

1. 画出两个圆形的div，一个作为遮罩的父div，一个作为显示图形的子div；
2. 将第一个div用clip截成左半圆，另一个截成右半圆；
3. 通过rotate方法对右半圆做旋转，从而实现自己想要角度的扇形；

代码：

HTML：

CSS：

#div1 {
	position:absolute;
	width:100px;
	height:100px;
	-moz-border-radius:50px;
	-webkit-border-radius:50px;
	-o-border-radius:50px;
	border-radius:50px;
	clip: rect(0px, 50px, 100px, 0px);
}

#div2 {
	position:absolute;
	width:100px;
	height:100px;
	background:red;
	-moz-border-radius:50px;
	-webkit-border-radius:50px;
	-0-border-radius:50px;
	border-radius:50px;
	clip: rect(0px, 100px, 100px, 50px);
	-moz-transform:rotate(-60deg);
	-webkit-transform:rotate(-60deg);
	-o-transform:rotate(-60deg);
	transform:rotate(-60deg);
}

实现效果不错，这样就相对比较完美了！