复制营养标签 - 专家CSS级别

Question

我试图在CSS中模仿这种营养标签格式,但我根本无法获得正确的形状.我能想到的最好的是摆弄边缘半径,但这给了我更多的药丸形状,但仍然无法在底部获得黑色切割形状.有没有人在CSS中复制这样的营养标签？有人愿意尝试吗？任何帮助将不胜感激.

这是我到目前为止的链接:jsfiddle.net/f5jczunf /

#block {
        border-radius:50%/10px;
        background: #ccc;
        padding: 20px; 
        width: 50px;
        height: 100px; 
        border: 1px solid #000;
        background-color:#FFF;
        text-align:center;
    }



.number {
          font-weight:bold;
          font-size:18pt;
          text-align:center;
        }

<div id="block">
<span class="number">150</span>
<br/>Calories
</div>

Answer 1

也许这个小例子可以提供帮助.

.label {
  position: relative;
  width: 100px;
  height: 140px;
  text-align: center;
  border: 1px solid #000;
  border-radius: 100px/50px;
  overflow: hidden;
}

.title {
  display: inline-block;
  margin-top: 30px;
}

.bottom {
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 50px;
  color: #fff;
  line-height: 40px;
  border-top: 1px solid #000;
  border-radius: 100px/50px;
  background-color: #000;
}

<div class="label">
  <span class="title">Title</span>
  <span class="bottom">Bottom</span>
</div>

https://jsfiddle.net/9xs2wcbL/1/