Replicating nutrition label - expert CSS level - html

Question

I am trying to emulate this nutrition label format in CSS, but I can't get the shapes right at all. The best I can come up with is fiddling with border-radius, but that gives me more of a pill shape, and still not way to get the black cut-out shape at the bottom. Has anyone replicated such a nutrition label in CSS? Would anyone be willing to try? Any help would be greatly appreciated.
Here is a link to what I have so far: 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

Maybe this small example can help.
.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/

Answer 2

Here's my take on it. It does require some advanced, bleeding edge CSS, however.
#import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
body {
padding: 3em;
font-size: 16px;
font-family: 'Open Sans Condensed', sans-serif;
}
.label-list {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.label-list .label-item {
text-align: center;
border: 1px solid;
position: relative;
border-radius: 2em / 0.65em;
padding: 0.2em 0.25em 1.5em;
min-width: 3.5em;
overflow: hidden;
margin: 0.1em;
z-index: 1;
background: white;
color: black;
}
.label-list .label-item h1 {
font-size: 3em;
line-height: 1em;
font-weight: 900;
margin: 0;
}
.label-list .label-item h1.smaller {
font-size: 1.75em;
margin-top: 0.5em;
}
.label-list .label-item h1 small {
font-size: 0.4em;
text-transform: none;
}
.label-list .label-item small {
font-size: 1em;
line-height: 1em;
font-weight: 900;
text-transform: uppercase;
}
.label-list .label-item span {
position: absolute;
bottom: 0.5em;
left: 0;
right: 0;
color: white;
font-size: 0.8em;
line-height: 1em;
}
.label-list .label-item span:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
background: black;
z-index: -1;
border-radius: 40%;
transform-origin: center;
width: 100%;
height: 0;
padding-top: 100%;
margin: auto;
transform: rotate(45deg) translate(20%, 20%);
}
<div class="label-list">
<div class="label-item">
<h1>140</h1>
<small>Calories</small>
</div>
<div class="label-item">
<h1 class="smaller">1<small>g</small></h1>
<small>Sat Fat</small>
<span>5% DV</span>
</div>
</div>

Answer 3

I believe the only way to have this sort of shape in pure CSS is with a few overlapping shapes, something similar to the code below:
.wrapper {
position: relative;
height: 112px;
width: 80px;
overflow: hidden;
}
.rectangle,
.circle {
position: absolute;
box-sizing: border-box;
}
.rectangle {
height: 96px;
width: 80px;
top: 8px;
border-left: 1px solid black;
border-right: 1px solid black;
}
.circle {
width: 200px;
height: 200px;
left: -60px;
border-radius: 200px;
border: 1px solid black;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}
<div class="wrapper">
<div class="circle top"></div>
<div class="rectangle"></div>
<div class="circle bottom"></div>
</div>
https://jsfiddle.net/dylanstark/01hck5dv/

Answer 4

here my approach for that. I'm using before and after pseudo-elements.
before contains black bg with border-radius and it is overflowing the main #block which has overflow: hidden;.
aftercontains text that is coming from data-text attribute of #block
#block {
border-radius: 50%/10px;
background: #ccc;
padding: 20px;
width: 50px;
height: 100px;
border: 1px solid #000;
background-color: #FFF;
text-align: center;
position: relative;
overflow: hidden;
}
#block:before {
display: block;
content: " ";
position: absolute;
bottom: -15px;
left: 0;
width: 100%;
height: 50px;
border-radius: 50%;
background: black;
z-index: 0;
}
#block:after {
display: block;
content: attr(data-label);
position: absolute;
bottom: 5px;
color: white;
text-align: center;
z-index: 1;
}
.number {
font-weight: bold;
font-size: 18pt;
text-align: center;
}
<div id="block" data-label="5% DY">
<span class="number">150</span>
<br/>Calories
</div>