CSS3是一种用于网页设计的最新技术，它可以实现各种华丽的动画效果。其中，扇形效果是一种常见的设计元素，让页面更加生动。下面介绍三种不同的CSS3扇形效果。

第一种扇形效果使用了CSS3的伪元素:before和:after。代码如下：

.fan {
width: 200px;
height: 200px;
border-radius: 100%;
position: relative;
overflow: hidden;
background-color: #f00;
}
.fan:before {
content: "";
width: 100%;
height: 100%;
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
transform-origin: top right;
transform: rotate(30deg);
}
.fan:after {
content: "";
width: 100%;
height: 100%;
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
transform-origin: bottom left;
transform: rotate(30deg);
}

效果如下图所示：

第二种扇形效果使用了CSS3的clip-path属性。代码如下：

.fan2 {
width: 200px;
height: 200px;
background-color: #f00;
-webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

效果如下图所示：

第三种扇形效果使用了CSS3的radial-gradient属性。代码如下：

.fan3 {
width: 200px;
height: 200px;
background: radial-gradient(circle at top right, white 0%, white 50%, #f00 50%);
}

效果如下图所示：

以上是三种不同的CSS3扇形效果，它们在实现方式上有所不同，但都可以让网页设计更加生动。