Question

这种效果用css3怎么写

Answer 1

我只做了扇子，代码有点乱，css3 前缀没有写（细节的可以自己完成吧？）。

.con {
    width: 150px;
    height: 150px;
    position: relative;top: 20px;
    transform: rotateZ(90deg);
}
.a {
    position: relative;
}
.a::before {
    content: "";display: block;
    position: absolute;left: 0;top: 0;width: 0;height: 0;
    border-top: 100px solid red;
    border-radius: 50%;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}
.a::after {
    content: "";display: block;
    position: absolute;left: 5px;top: 15px;width: 0;height: 0;
    border-top: 100px solid white;
    border-left: 65px solid transparent;
    border-right: 65px solid transparent;
    border-radius: 50%;
}
.b {
    position: relative;top: 30px;left: 20px;
}
.b::before {
    content: "";display: block;
    position: absolute;left: 0;top: 0;width: 0;height: 0;
    border-top: 80px solid red;
    border-radius: 50%;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
.b::after {
    content: "";display: block;
    position: absolute;left: 5px;top: 15px;width: 0;height: 0;
    border-top: 80px solid white;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    border-radius: 50%;
}
.c {
    position: relative;top: 60px;left: 40px;
}
.c::before {
    content: "";display: block;
    position: absolute;left: 0;top: 0;width: 0;height: 0;
    border-top: 55px solid red;
    border-radius: 50%;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
}
.c::after {
    content: "";display: block;
    position: absolute;left: 5px;top: 15px;width: 0;height: 0;
    border-top: 60px solid white;
    border-radius: 50%;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
}

<div class="con">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>

DEMO :

请采纳。

Answer 2

背景图+圆角+边框

追问

思路我有的，就是不知道里面那个扇形的实现方式，求代码示例

追答

那就是个图片。