如何制作 3d css 胶囊

【问题标题】：How to make a 3d css capsule如何制作 3d css 胶囊
【发布时间】：2020-01-01 03:11:45
【问题描述】：

谁能帮我用 scss 或 css 制作一个 3d 药物胶囊。我需要它作为加载图标。喜欢那个here

【问题讨论】：

非常感谢@frederick99 ....它的完美，我不能感谢你......嘿，我怎么会有一个负1，我现在做错了什么？
你可以把代码贴出来，我会标记为答案
您可能收到了反对票，因为您的问题非常重要，而且您还没有发布任何代码或告诉我们您过去尝试过的任何事情。希望这有助于将来发布问题:)
谢谢，但如果人们很好地阅读了这个问题。这意味着我过去没有尝试过任何事情，因为这是一个“如何做”的问题
我过去没有尝试过任何事情，因为这是一个“如何做”的问题 --> 这些问题是题外话，你很可能会得到反对票和接近票.

标签： css sass

【解决方案1】：

这是一个使用单个 div 元素的示例。随意更改您想要的任何元素（颜色、阴影、动画？等）。

#capsule {
  width:120px;
  height:50px;
  margin: 50px auto 0;
  border-radius: 25px;
  display: flex;
  overflow: hidden;
  box-shadow:
    -1px 13px 17px -10px #000000d9,
    -8px -9px 17px 9px #000000ab inset;
}
#capsule:after, #capsule:before {
  content:'';
  display:block;
  width:50%;
  height:100%;
  opacity: .8;
}
#capsule:after{
  background: #009ff3;
}
#capsule:before{
  background: #ffffff;
}

&lt;div id="capsule"&gt;&lt;/div&gt;

【讨论】：

这是原始笔的链接：codepen.io/frederick99_/pen/pozPVmx/left?editors=0100