如何用纯 HTML 和 CSS 制作酒杯

如今，我们看到很多开发者使用 HTML、CSS 甚至 JavaScript 等编程语言来复制现实生活中的物体，从而赋予它们更多生命力和功能。令人惊奇的是，除了常规的 Web 开发、应用开发、AI 等领域之外，编程还能发挥如此大的作用。这真是太棒了！

在本文中，我将向您展示如何使用纯 HTML 和 CSS 制作三种不同的酒杯。在开始之前，您需要一个很棒的工具——花式边框半径生成器。现在，谁准备好欣赏 CSS 艺术作品了？！

研究

我首先阅读了各种酒杯的介绍。经过一番研究，我决定制作一个包含起泡酒杯、勃艮第酒杯和甜酒杯的模型。

建立基地

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="wg.css">
    <title>Wine glass</title>
</head>
<body>
    <div class="container">
        <!--First wine glass -->
        <div class="body">
            <div class="wine"></div>
        </div>
        <div class="middle"></div>
        <div class="base"></div>
    </div>
</body>
</html>

编写 HTML - 我决定将酒杯分成以下几个部分：

酒体——盛装葡萄酒的上部
中间——酒杯的把手
底座——酒杯的底部
还有葡萄酒本身

对酒杯 2 和 3 重复同样的操作

        <!--Second wine glass -->
        <div class="container2">
        <div class="body2">
            <div class="wine2"></div>
        </div>
        <div class="middle2"></div>
        <div class="base2"></div>
        </div>
        <!--Third wine glass -->
        <div class="container3">
        <div class="body3">
            <div class="wine3"></div>
        </div>
        <div class="middle3"></div>
        <div class="base3"></div>
        </div>

深入 CSS

身体

body{
    display: flex;
  justify-content: center;
  padding-top: 50px;
}
.container{
    float: left
}

.body{
    background: rgba(180, 180, 180, 0.3);
    width: 200px;
    height: 300px;
    border-radius: 53% 47% 49% 51% / 0% 0% 100% 100%;
    border: 1px solid transparent;
    filter: blur(0px);
    box-shadow: inset 0 1px 0px #444444, inset 0 2px 0 white,
        inset 0 -6px 3px #444444;
}

我使用flex和justify-content使酒杯居中，并给 body 标签赋值padding-top为 50px。接下来，对于第一个酒杯的容器和杯身，我添加了，background赋予它类似玻璃的颜色，width & height指定酒杯的尺寸，border-radius指定酒杯的形状/类型，border增加酒杯的厚度，最后filter & box-shadow给它添加模糊效果和类似玻璃的外观。

附言：我使用了Fancy Border Radius Generator来获取border-radius。

葡萄酒

.wine{
    background: linear-gradient(to bottom, transparent,
        transparent, transparent, #b86b77, #b86b77, #b86b77);
    width: 200px;
    height: 300px;
    border-radius: 53% 47% 49% 51% / 0% 0% 100% 100%;
}

通过为.winebackground添加颜色，让它呈现出酒杯中盛满葡萄酒的效果。我决定添加透明色，让它呈现出半满的效果（我的意思是，谁会把酒倒到酒杯边缘呢？哈哈）。 .body中使用的值保持不变，这样它们才能完美地相互契合。
width, height & border-radius

中间

.middle{
    background: rgba(180, 180, 180, 0.3);
    width: 20px;
    height: 250px;
    border-radius: 0 0 5px 5px;
    border: 1px solid transparent;
    filter: blur(0px);
    box-shadow: inset 0 1px 0px #444444, inset 0 2px 0 white, 
        inset 0 -6px 3px #444444;
    position: relative;
    left: 90px;
    bottom: 5px;
}

接下来，指定width & height酒杯手柄的。使用background, border, filter: blur() & box-shadow与.body相同的值，以保持一致性。最后，添加position，并使用left & bottom，将手柄放置在酒杯杯身下方的正确位置。

根据

.base{
    background: rgba(180, 180, 180, 0.3);
    width: 130px;
    height: 25px;
    border-radius: 50%;
    border: 1px solid #777;
    filter: blur(0px);
    filter: drop-shadow(8px 8px 8px black);
    position: relative;
    left: 30px;
    bottom: 10px;
}

对于酒杯的最后部分，指定width & height酒杯底部的，添加一个。使用与.bodyborder相同的值以保持一致性。然后添加另一个，为其添加阴影效果。最后，添加，并使用，将底部放置在酒杯手柄下方正中央。background, filter: blur()filter: drop-shadow()positionleft & top

尖端

您可以使用这行代码制作更多不同类型的酒杯，要使它们有所不同，您唯一要做的就是通过改变width, height and border-radius杯身、width & height杯柄和width & height杯底来指定每个酒杯的大小和形状。

好了！就是这样。你能分辨出酒杯的种类吗？在评论区留言吧。

CodePen 实时代码链接 - https://codepen.io/TheFlorz/pen/WNrLmME

结论

CSS 绘画真的是一项充满乐趣和挑战的任务，它能帮助我们提升开发者的技能，并开启更多精彩的探索之旅。你愿意尝试一下吗？我觉得你应该尝试一下，你一定会爱上它！

鏂囩珷鏉ユ簮锛�https://dev.to/theflorz/how-to-make-wine-glasses-with-pure-html-css-328g