우선 평범한 사다리꼴을 만들어 보세요.

trapezoid.html

<div class="trapezoid"></div>

trapezoid.css

.trapezoid {
    width: 120px;
    border-bottom: 80px solid orange;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    height: 0;
}

이 모서리를 한 덩어리로 빚어라.

수평방향과 수직방향의 거리감을 고려하여 다음 줄을 css에 추가합니다.
trapezoid.css

border-radius: 26px 26px 6 6 / 80px 80px 6 6;

이렇게 되면 아래가 이렇게 돼요.

...약간 이렇지만 전체감을 강화해야 한다고 생각하면 각도 문제로 불합리한 생각이 든다.그리고 이radius(예를 들어 반경을 높이보다 큰 수치로 설정)를 확대하면 잘 모르는 행동이 된다.(따로 알아보고 싶습니다.)

안에서 글을 써 보아라.

보통 div에 글씨를 씁니다.
trapezoid.html

<div class="trapezoid">文字です。</div>

우선 한 줄이기 때문에 라인하이트로 문자의 높이를 가운데로 맞추어 보세요.
trapezoid.css

.trapezoid {
    width: 120px;
    border-bottom: 80px solid orange;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    height: 0;
    text-align: center;
    line-height: 80px;
}

두 줄은 적당히 가운데에 놓아라.
trapezoid.html

<div class="trapezoid">
    <div class="inner">文字です。<br>二行目ですよ。</div>
</div>

trapezoid.css

.trapezoid {
    width: 120px;
    border-bottom: 80px solid orange;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    height: 0;
    text-align: center;
}

.inner {
    padding-top: 14px;
}

적합하다그냥 .inner패딩으로 적당히 조절하고 있어요.다만, 해보니 ".trapezoid의padding과margin은 아무리 해도 잘 안 된다"는 것을 알게 됐다.