css 질문좀드리겠습니다.

<style>
/*triangle background extra extra small*/
.triangle-bg, .triangle-bg:before, .triangle-bg:after { width: 5em; height: 5em; }

/*common triangle style*/
.triangle-bg {
    overflow: hidden;
    position: relative;
    margin:2em auto -20px;
    border-radius: 30% 20% 20% 20%;
    transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866);
} 
.triangle-bg:before, .triangle-bg:after{
    position: absolute;
    background: #ccc;
    pointer-events: auto;
    content: '';
}
.triangle-bg:before {
    border-radius: 20% 20% 20% 53%;
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) 
            skewX(30deg) scaleY(.866) translateX(-24%);
}
.triangle-bg:after {
    border-radius: 20% 20% 53% 20%;
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) 
            skewX(-30deg) scaleY(.866) translateX(24%);
}
    #base {
      background: #ccc;
      height: 40px;
      margin: 0 auto;
      position: relative;
      width: 70px;
      border-radius: 20px;
    }
</style>

<div class="page-container">
    <div class="triangle-bg"></div>
    <div id="base"></div>
    
</div>