можно немного лепестки наклонить с помощью 3d
как лопасти турбины
один край всегда будет выше - другой ниже
css в примере только для webkit - Хром, Опера и т.д.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<style>
.secondCandy{
width: 180px;
height: 180px;
background-color: black;
border-radius: 50%;
}
.circLelollipop{
position: relative;
width: 180px;
height: 180px;
transform-style: preserve-3d;
}
.sliceCandy{
position: absolute;
top: 26.5%;
left: 2.5%;
width: 86.4px;
height: 86.4px;
border-radius: 50%;
transform-origin: right center;
}
.sliceCandy:nth-child(even){
background-color: white;
}
.sliceCandy:nth-child(odd){
background-color: red;
}
.piece_1{
transform: rotateZ(0) rotateX(30deg);
}
.piece_2{
transform: rotateZ(30deg) rotateX(30deg);
}
.piece_3{
transform: rotateZ(60deg) rotateX(30deg);
}
.piece_4{
transform: rotateZ(90deg) rotateX(30deg);
}
.piece_5{
transform: rotateZ(120deg) rotateX(30deg);
}
.piece_6{
transform: rotateZ(150deg) rotateX(30deg);
}
.piece_7{
transform: rotateZ(180deg) rotateX(30deg);
}
.piece_8{
transform: rotateZ(210deg) rotateX(30deg);
}
.piece_9{
transform: rotateZ(240deg) rotateX(30deg);
}
.piece_10{
transform: rotateZ(270deg) rotateX(30deg);
}
.piece_11{
transform: rotateZ(300deg) rotateX(30deg);
}
.piece_12{
transform: rotateZ(330deg) rotateX(30deg);
}
</style>
</head>
<body>
<div class="secondCandy">
<div class="circLelollipop">
<div class="sliceCandy piece_1"></div>
<div class="sliceCandy piece_2"></div>
<div class="sliceCandy piece_3"></div>
<div class="sliceCandy piece_4"></div>
<div class="sliceCandy piece_5"></div>
<div class="sliceCandy piece_6"></div>
<div class="sliceCandy piece_7"></div>
<div class="sliceCandy piece_8"></div>
<div class="sliceCandy piece_9"></div>
<div class="sliceCandy piece_10"></div>
<div class="sliceCandy piece_11"></div>
<div class="sliceCandy piece_12"></div>
</div>
</div>
</body>
</html>