使用不一樣的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>