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

Myth丶恋晨 2022-05-21 23:38 323阅读 0赞

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

![20180611100929101][]

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

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

![20180611101212697][]

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

思路是这样的：

第一步：

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

第一层为灰色画布（黑色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结构长这样：

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

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

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

![70][]

详细代码[点击这里][Link 1]

[20180611100929101]: /images/20220522/44ff7b84395049bd8dc7b3597da05b7c.png
[20180611101212697]: /images/20220522/c184515354d9458cbb9511d26b05ecd9.png
[70]: /images/20220522/f6c954489f8d4b8c831f5305e5fc1509.png
[Link 1]: https://github.com/aeolusheath/FrontExersize/blob/master/html/qiwuSTUDY/%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BC%96%E7%A8%8B%E7%9A%84%E5%BA%94%E7%94%A8/TEST-PROGRESS-RATE-%E8%BF%9B%E5%BA%A6%E6%9D%A1.html