我需要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动画制作动画：

在这个例子中：

• 玻璃是由divs边框制作而div是position: relative。

• 主干由:before制作，并以position: absolute和left / top

定位

• 基地由:after制作，并以position: absolute和left / top

定位

基本示例

＆＃13;

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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);
 }