jquery - 我需要 CSS 中的玻璃形状

Question

这可能是个很奇怪的问题。但这就是我需要的。我以某种方式创建了一个范围 slider ，它在从值 0 滑动到 100 时用颜色填充形状。Here is the current state (请滑动问题#1)

我创建的形状是一个蛋形。(笑)。我需要让它看起来像一个玻璃。因此，在更改 slider 范围时，看起来应该是玻璃杯里装满了东西。

关于如何在 CSS 中制作玻璃形状有什么想法吗？

这就是我制作鸡蛋形状的方法:

.right {
  width: 126px;
  height: 180px;
  position: absolute;
  left: 200px;
  left: auto;
  border-style: solid;
  border-width: 1px;
  -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

<div class="right"></div>

Answer 1

取决于您需要的特定类型的玻璃，但基本上都归结为(哈!)同一个想法 — 使用 pseudo elements额外的视觉效果。让我们制作这个基本形状:

它甚至可以用 CSS3 动画制作动画:

在这个例子中:

• 玻璃由 div 边框制成，div 制成 position: relative。

• 词干由 :before 组成，并使用 position: absolute 和 left/top 定位>

• 底部由 :after 组成，并使用 position: absolute 和 left/top 定位>

基本示例

div {
  height: 50px;
  width: 50px;
  border: solid 1px #000;
  border-radius: 0 0 50% 50%;
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 20px;
}
div:before {
  height: 100%;
  width: 1px;
  background: #000;
  content: '';
  display: block;
  left: 50%;
  top: 100%;
  position: absolute;
}
div:after {
  height: 100%;
  width: 40px;
  height: 1px;
  background: #000;
  content: '';
  display: block;
  left: 50%;
  margin-left: -20px;
  top: 100px;
  position: absolute;
}
.two {
  border-width: 6px;
  border-radius: 5px 5px 50% 50%;

}
.two:before {
  width: 6px;
  margin-left: -3px;
}
.two:after {
  height: 6px;
  border-radius: 6px;
}
span {
  position: absolute;
  bottom: -6px;
  left: -6px;
  background: #F00;
  width: 100%;
  border: solid 6px #000;
  border-top: none;
  -webkit-animation: fillGlass 3s infinite;
  animation: fillGlass 3s infinite;
  border-radius: 0 0 50px 50px;
}
@-webkit-keyframes fillGlass {
  0% {
    height: 25px;
  }
  50% {
    height: 46px;
    }
  100% {
    height: 25px;
  }
}
@keyframes fillGlass {
  0% {
    height: 25px;
  }
  50% {
    height: 46px;
    }
  100% {
    height: 25px;
  }
}

<div></div>
<div class="two">
  <span></span>
</div>