%で指定できる三角形をCSSで作りたい

#実現したいこと
以下のような形**（五角形のような赤い部分）**をcssで再現したいです。

###実際のコード

html
1<div class="box_arrow">
2    <p>何かテキストが入る</p>
3  </div>

#試したこと
こちらの19番目に紹介されているヘキサゴンのbeforeを取って試しましたが、border-left, border-rightを**%の指定にすると効かなくなります。。。**

css
1content: "";
2	position: absolute;
3	bottom: -25px;
4	left: 0;
5	width: 0;
6	height: 0;
7	border-left: 50px solid transparent;
8	border-right: 50px solid transparent;
9	border-top: 25px solid #81C7D4;

border-left, border-rightの部分がpxの指定だと、画面幅が変わるとレイアウトが崩れるので、%にしたいです。

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

回答1件

ベストアンサー

border - CSS: カスケーディングスタイルシート | MDN

上記の「計算値」の項目にborder-width: は「絶対的な長さ」との記載があります。
相対値(%)は設定できない仕様のようです。

親要素の幅を vw単位で指定して、border-width: もvw単位で指定すればどうでしょう。

css
1.box_arrow {
2/* 六角ヘキサゴン */
3.box_arrow {
4  width: 80vw;
5  height: 55px;
6  background: #81C7D4;
7  position: relative;
8  border: 10% solid;
9}
10.box_arrow::after {
11  content: "";
12  position: absolute;
13  bottom: -25px;
14  left: 0;
15  width: 0;
16  height: 0;
17  border-left: 40vw solid transparent;
18  border-right: 40vw solid transparent;
19  border-top: 25px solid #81C7D4;
20}