.hex {
position: relative;
height: 100px;
min-width: 100px;
padding: 12px 24px;
margin: 4px;
float: left;
font-weight: bold;
font-size: 20px;
text-align: center;
color: white;
}
.hex svg {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
z-index: -1;
}
path {
fill: rgb(251, 208, 0);
}
.hex.border path {
stroke: red;
stroke-width: 4;
}
span {
display: block;
margin-top: 50px;
padding: 8px;
transform: translateY(-50%);
}
<div class='hex'>
<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
<path d='M27,7
L72,7 Q76,7 78,11
L95,46 Q97,50 95,54
L78,91 Q76,95 72,95
L28,95 Q24,95 22,91
L5,54 Q3,50 5,46
L22,11 Q24,7 28,7z' vector-effect='non-scaling-stroke' />
</svg>
<span>Some text</span>
</div>
<div class='hex'>
<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
<path d='M27,7
L72,7 Q76,7 78,11
L95,46 Q97,50 95,54
L78,91 Q76,95 72,95
L28,95 Q24,95 22,91
L5,54 Q3,50 5,46
L22,11 Q24,7 28,7z' vector-effect='non-scaling-stroke' />
</svg>
<span>Some lengthy text
without line break.</span>
</div>
<div class='hex border'>
<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
<path d='M27,7
L72,7 Q76,7 78,11
L95,46 Q97,50 95,54
L78,91 Q76,95 72,95
L28,95 Q24,95 22,91
L5,54 Q3,50 5,46
L22,11 Q24,7 28,7z' vector-effect='non-scaling-stroke' />
</svg>
<span>Some very lengthy text</span>
</div>
<div class='hex border'>
<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
<path d='M27,7
L72,7 Q76,7 78,11
L95,46 Q97,50 95,54
L78,91 Q76,95 72,95
L28,95 Q24,95 22,91
L5,54 Q3,50 5,46
L22,11 Q24,7 28,7z' vector-effect='non-scaling-stroke' />
</svg>
<span>Some very lengthy text
<br>with line break.</span>
</div>