css 질문좀드리겠습니다. 채택완료

</p>

<p><style>

/*triangle background extra extra small*/

.triangle-bg, .triangle-bg:before, .triangle-bg:after { width: 5em; height: 5em; }</p>

<p>/*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></p>

<p><div class="page-container">

    <div class="triangle-bg"></div>

    <div id="base"></div>

    

</div>

 </p>

<p>