cssbattle #8 forking crazy

所用知识点：
box-shadow–用于复制刀叉
translate进行微调
flex布局
border-radius
整体思路：
刀叉体占用一个div ，刀叉柄占用一个div,刀叉占用两个div,分别是上圆边的矩形和下圆框的矩形
步骤
1.刀叉体左下角和右下角变圆，也就是画出一个扇形
2.刀叉柄，矩形，通过translate进行微调即可
3.刀叉，矩形，利用border-radius进行边框圆形化，分别创建一个上边框圆形的小矩形和下边框矩形的小矩形，然后利用translate把矩形覆盖至扇形（刀叉体）上面，剩下的就利用box-shadow等距复制即可
不了解box-shadow的同学可以通过MDN文档进行查看box-shadow.

下面就是我的代码：

.fork{
background:#060F55;
}
.fork-body{
width:140px;
height:100px;
border-radius:0px 0px 150px 150px;
transform:translateX(35px) translateY(50px);
}
.fork-handle{
width:20px;
height:70px;
transform:translateX(-45px) translateY(130px);
}
.fork-point
{
width:20px;
height:100px;

}
.fork-point-top{
border-radius:20px 20px 0px 0px;
transform:translateX(-125px) translateY(-49px);
box-shadow:
40px 0px #060F55,
80px 0px #060F55,
120px 0px #060F55;
}
.fork-point-bottom{
background:#6592CF;
border-radius:0px 0px 20px 20px;
transform:translateX(-125px) translateY(-43px);
box-shadow:
40px 0px #6592CF,
80px 0px #6592CF;
}

比较乱，如果大家有比较好的重构思路，可以给我留言进行改正，谢谢大家