<div class="skin">
  <div class="flesh">
    <div class="seeds-container">
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
    </div>
  </div>
</div>

.skin {
  margin-top: 150px;  
  margin-right: auto;
  margin-left: auto;
  width: 400px;
  height: 200px;
 -webkit-border-bottom-right-radius: 400px;   
 -webkit-border-bottom-left-radius: 400px;
 -moz-border-radius-bottomright: 400px;   
 -moz-border-radius-bottomleft: 400px;
  border-bottom-left-radius: 400px;
  border-bottom-right-radius: 400px;
  box-shadow: 2px 2px 5px black;
  background-color: green;
  transition: all 1s;
  cursor: pointer;
}


.skin .flesh {
  margin-right: auto;
  margin-left: auto;
  width: 350px;
  height: 180px;
  background-color: red;
  -webkit-border-bottom-right-radius: 350px;   
 -webkit-border-bottom-left-radius: 350px;
 -moz-border-radius-bottomright: 350px;   
 -moz-border-radius-bottomleft: 350px;
  border-bottom-left-radius: 350px;
  border-bottom-right-radius: 350px;
}

.skin .flesh .seeds-container {
  width: 350px;
  height: 180px;
  -webkit-border-bottom-right-radius: 350px;   
 -webkit-border-bottom-left-radius: 350px;
 -moz-border-radius-bottomright: 350px;   
 -moz-border-radius-bottomleft: 350px;
  border-bottom-left-radius: 350px;
  border-bottom-right-radius: 350px;
  overflow: hidden;
}

.skin .flesh .seeds-container .seed {
  margin-left: 18%;
  margin-top: 10%;
  display: inline-block;
  width: 5px;
  height: 2px;
  background-color: black;
 -ms-transform: rotate(60deg);
 -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}