CSSで吹き出しを作る記述

以下のようなコメントや吹き出しの記述メモ (レスポ対応)

ポイント

• 三角は擬似要素
• 三角はborderで形成
• 要素と擬似要素のheightは同じにする(ぴったりくっつけるため)

たいてい親要素があると思うのでwidht:100%でOKの場合が多いが
他の要素と調整して必要に応じてmax-widthなどで対応

<div class="comment">コメント</div>

/* ===== グレー部分 ===== */
.comment{
    width: 100%;
    height: 4rem;
    border-radius: 1rem;
    background-color: lightgrey;
    position: relative;
}

/* ===== オレンジの三角部分 ===== */
.comment:after{
    content: "";
    position: absolute;
    top: 4rem;
    left: 50%;
    transform: translateX(-50%);
 /* 三角マークの形成 */
    width: 0;
    border-top: 1rem solid orangered;
    border-left: .8rem solid transparent;
    border-right: .8rem solid transparent;
}