添付画像のような吹き出しの作り方がわからない

前提・実現したいこと

以下のような吹き出しのパーツをhtml ,css を駆使して作成したいのですが、うまくできません。
とくに左右の斜めになっている箇所が特に分からず....clip-pathプロパティを使うことで台形などが作成できるのでやってみた結果、outlineが表示されずうまくいきません。

わかる方ぜひ教えていただければ嬉しいです。

該当のソースコード

HTML

1<div class="wrapper"> 2 <div class="wrapper__text">先着10名様限定</div> 3</div>

CSS

1.wrapper {2 3 width: 124px;4 height: 38px;5 outline: 1px solid #8B6C3A;6 clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);7 position: relative;8 9}10 11.wrapper__text {12 13 font-size: 14px;14 line-height: 14px;15 letter-spacing: 0.05em;16 width: 100%;17 height: 100%;18 display: flex;19 justify-content: center;20 align-items: center;21 22}

試したこと

clip-pathプロパティに関してはこちらのサイトを参考にしました。参考リンク