html - 带有重叠文本的五个按钮

Question

我正在构建以下内容(见图)。基本上，我需要 5 个顶部有重叠按钮(每个都有数字)的按钮。但是，我不确定该怎么做？

Answer 1

一个解决方案:

https://jsfiddle.net/ryd5e51n/

<div class="button">
    <div class="button-top"><span class="text">1</span></div>
    <div class="button-bottom"></div>
</div>

.button
{
    display: table;
}

.button-top
{
    background-color: black;
    width: 36px;
    height: 36px;
    border-radius: 18px;
    margin: auto;
    position: relative;
    z-index: 2;
    box-shadow: 0px 0px 2px 2px #bbbbbb;
    color: white;
    text-align: center;
}

.text
{
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%); 
}

.button-bottom
{
    background-color: #efefef;
    width: 100px;
    height: 90px;
    margin-top: -15px;
    position: relative;
    z-index: 1;
    border: 2px solid #bbbbbb;
    border-radius: 20px;
}