创建一个包含五个不同颜色的方块的图形，并以HTML和CSS代码形式输出。
HTML代码：
```
<div class="container">
  <div class="box red"></div>
  <div class="box blue"></div>
  <div class="box yellow"></div>
  <div class="box green"></div>
  <div class="box purple"></div>
</div>
```
CSS代码：
```
.container {
  display: flex;
}

.box {
  width: 100px;
  height: 100px;
  margin: 10px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: green;
}

.purple {
  background-color: purple;
}
```
这个代码会创建一个带有5个不同颜色方块的图形，每个方块都是100x100像素大小，它们放置在一个CSS flex容器中并使用不同的CSS类来指定其颜色。