使用不同的CSS方法绘制条形统计图

题目描述

请使用CSS方法实现下图所示的条形图。从左到右的条形分别记为A,B,C,D,E。A的高度为30%，颜色为#f00；B的高度为80%，颜色为#ddd；C的高度为70%，颜色为#0fd；D的高度为60%，颜色为#ff0；E的高度为90%，颜色为#234，每个条形之间的距离可以任意设置（可以考虑使用CSS3新属性来实现）。

效果图如下：

代码示例：

<style>
      body {
        display: flex; /*弹性盒模型容器*/
        align-items: flex-end; /*子元素对齐底部*/
        justify-content: space-around;
        width: 320px;
        height: 300px;
        border-left: 1px solid black;
        border-bottom: 1px solid gray;
      }
      div {
        width: 30px;
        height: 200px;
      }
      div:nth-child(1) {
        height: 30%;
        background-color: #f00;
      }
      div:nth-child(2) {
        height: 80%;
        background-color: #ddd;
      }
      div:nth-child(3) {
        height: 70%;
        background-color: #0fd;
      }
      div:nth-child(4) {
        height: 60%;
        background-color: #ff0;
      }
      div:nth-child(5) {
        height: 90%;
        background-color: #0ff;
      }
    </style>