我需要 CSS 中的玻璃形状

Question

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

我创建的形状是一个蛋形。（笑）。我需要让它看起来像一个玻璃。因此，在更改滑块范围时，似乎玻璃杯中装满了东西。

知道如何在 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>

Answer 2

如果您需要放大镜，那么这就是您的答案。 JS

CSS

.right {
 font-size: 10em;
/* This controls the size. */
display: inline-block;
width: 0.4em;
height: 0.4em;
border: 0.1em solid red;
position: relative;
border-radius: 0.35em;
}
.right::before {
  content:"";
  display: inline-block;
  position: absolute;
  right: -0.25em;
  bottom: -0.1em;
  border-width: 0;
  background: red;
  width: 0.35em;
  height: 0.08em;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
 }