<html>
  <body>
    <div class="board">
      <div class="nigiri-plate">
        <div class="nigiri">
          <h1>/ / / / / / /</h1>
        </div>
        <div class="nigiri">
          <h1>/ / / / / / /</h1>
        </div>
        <div class="nigiri">
          <h1>/ / / / / / /</h1>
        </div>
      </div>
      <div class="soup"></div>
    </div>
  </body>
</html>
.board {
  width: 500px;
  height: 350px;
  margin: 20px auto;
  padding: 20px;
}

.nigiri-plate {
  background-color: #223;
}

.nigiri-plate:after {
  content: "";
  clear: both;
  display: block;
}

.nigiri {
  width: 29.33%;
  padding: 0 1%;
  margin: 1%;
  float: left;
  background-color: #fff;
  border-radius: 100px;
}

.soup {
  width: 200px;
  height: 200px;
  margin: 20px auto;
  border-radius: 100%;
  background: #8FB391;
  border: 6px solid white;
}

/* Weird prettyfying styles we don't need to care about but you can look at if you're curious*/
.board {
  background-image: linear-gradient(0.25turn, #CBAD8C 0%, #BA9C6A 50%);
  border-radius: 8px;
  box-shadow: 12px 8px 0 rgba(#000, 0.1);
}

.nigiri-plate {
  box-shadow: inset -8px -8px 0 0 #558;
  border-radius: 20px;
  height: 105px;
}

.nigiri {
  box-shadow: inset -3px -6px 0 0 #ece0cd;
  text-align: center;
}

.nigiri > h1 {
  background-color: #fca35d;
  color: #fce2da;
  border-radius: 100px;
  font-weight: 100;
}

.soup {
  background: radial-gradient(#8FB391 20%, #9DC49F 46%, #9DC49F 50%);
  box-shadow: inset 10px 4px 0 rgba(#000,0.1), 5px 5px 0 rgba(#000, 0.2);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.