【CSS】使用css绘制一个沙漏

现在有一个需求，绘制一个沙漏，像下面这样：

其实如果单纯绘制这样一个 “静态”的沙漏，很简单，因为我们都知道怎么画三角形，使用border即可做到，黑边我们在外面增加一个div即可。或者给一个上下边框为黑色2px的div增加一个::after or ::before伪元素即可。

但是我们需要这个沙漏是“动态”的，比如说我们可以控制并且显示它的进度，就像下面这样：

当然仍然是比较简陋的，但是我们可以控制黄色区域来控制显示进度。

思路是这样的：

    第一步：

        我们将这个沙漏一共分为两层： 

            第一层为灰色画布（黑色border跟随灰色画布即可）

            第二层为透明画布 （分成两个div，上下两个，高度为50%固定）

            第三层为黄色石砂，这个是在第二层的透明画布上来实现，控制这两个黄色石砂的高度即可。

   第二步：

        我们给灰色画布增加一个伪元素，这个伪元素左右border为white，上下border为transparent，给上面的画布定型。左右border为white是为了遮住画布和石砂的颜色，上下透明就是为了显示余下的三角形范围里面的画布和石砂颜色。

代码如下

css代码长这样：

  .container {
    border-bottom: 2px solid black;
    border-top: 2px solid black;
    position: relative;
    margin-top: 50px;
    display:flex;
    height: 200px;
    width: 80px;
    flex-direction: column;
    background-color: #ddd;
    margin: 0 auto;
  }
  .container::after {
    position: absolute;
    right:0;
    bottom:0;
    width:0;
    height:0;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 40px solid white; 
    border-right: 40px solid white;
    content: '';
  }
  .container .sub-container {
    height: 50%;
    width: 100%;
    display: flex;
    align-items: flex-end;    
  }
  .sub-container .up {
    width:100%;
    height: 100%;
    background-color: orange;
  }
  .sub-container .down {
    width:100%;
    height: 0;
    background-color: orange;
    
  }

html结构长这样：

      <div class="container" >
        <div class="sub-container">
           <div class="up"></div>  
        </div>

        <div class="sub-container">
           <div class="down"></div>     
        </div>
      </div>

其实这个实现特别简陋，我们虽然可以设置类为up和down的元素的高度来实现，但是设置高度的时候可以用动画，但是对于落下来的石砂这个动画没有思路。

-------分割线-----------

今天用了一个过度效果实现了一个简单的动画，见下图（抱歉不知道怎么去水印

详细代码点击这里