CSS battle：画一个叉子，该怎么实现啊？

Question

CSS battle：画一个叉子，该怎么实现啊？

如下图所示，网站链接

Answer 1

<div class="fork-top">
  <div class="fork-hole"></div>
  <div class="fork-hole"></div>
  <div class="fork-hole"></div>
  <div class="fork-hole"></div>
  <div class="fork-hole"></div>
  <div class="fork-hole"></div>
  <div class="fork-hole"></div>
</div>
<div class="fork-body"></div>
<div class="fork-bottom"></div>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  body {
    background: #6592CF;
  }
  .fork-top {
    margin: 50px auto 0;
    width: 140px;
    height: 110px;
  }
  .fork-hole {
    float: left;
    width: 20px;
    height: 110px;
    background: #060F55;
    border-radius: 10px;
  }
  .fork-hole:nth-child(even) {
    background: #6592CF;
  }
  .fork-body {
    width: 140px;
    height: 100px;
    background:#060F55;
    margin: -10px auto 0;
    border-radius: 0 0 100px 100px;
  }
  .fork-bottom {
    width: 20px;
    height: 50px;
    background: #060F55;
    margin: auto;
  }
</style>