widthを指定していない要素にafter要素を当てたい

実現したいこと

添付の画像のような、下部のみリボン型のカードをレスポンシブで表現したいです。

前提

レスポンシブで画面幅に応じて要素が伸び縮みするようにしたいので、要素の横幅を指定していない状態です。
after要素でリボン部分を足したいのですが、大元の横幅を設定していないので、border-leftとborder-right内の数値をどう指定すべきか悩んでいます。

こうしたい↓
（分かりやすいよう色を分けていますが、実際は全て#fffで表示させます）

現状記述しているソースコード

css
1    .box {
2        position: relative;
3    }
4    .box::after {
5        content: '';
6        position: absolute;
7        left: 0;
8        top: 100%;
9        border-radius: 0 0 10px 10px;
10        border-left: ●●● solid #fff;
11        border-right: ●●● solid #fff;
12        border-bottom: 40px solid transparent;
13    }

行動規範の内容に同意します

回答1件

ベストアンサー

https://codepen.io/arcxor/pen/VwGrpaY

clip-path を用いてください。

css
1.box::after {
2  content: '';
3  position: absolute;
4  left: 0;
5  right: 0;
6  top: 100%;
7  height: 40px;
8  clip-path: polygon(0 0, 0 40px, 50% 0, 100% 40px, 100% 0);
9  border-radius: 0 0 10px 10px;
10  background: #ffc;
11}