css中扇形三同一不同

在CSS中，扇形可以使用border-radius属性搭配transform属性来实现。下面我们将介绍三种不同但又相似的扇形效果。

// 扇形1
.sector1 {
  width: 0;
  height: 0;
  border-radius: 0 0 100px 100px;
  border: 50px solid #f00;
  transform: rotate(45deg);
}

// 扇形2
.sector2 {
  width: 0;
  height: 0;
  border-radius: 50% 0 0 50%;
  border: 50px solid #0f0;
  transform: rotate(45deg);
}

// 扇形3
.sector3 {
  width: 50px;
  height: 100px;
  border-radius: 50px 50px 0 0;
  border: 50px solid #00f;
  transform: rotate(45deg);
} 

扇形1使用了四个圆角的border-radius属性，将两个半圆排列成扇形效果，并通过transform属性使其旋转45度。扇形2使用了50%的border-radius值来制作半圆形，将两个半圆排列成扇形效果，并通过transform属性使其旋转45度。扇形3则是使用矩形的border-radius和特定的边框形状来制作扇形。

总的来说，三种扇形的CSS实现方式都较为简单，使用border-radius和transform属性可以轻松搭配出多种形状。在项目中可以灵活运用，制作出各类独特的扇形效果。