HTML/CSS如何：由矩形+三角形组成的响应形状

我想让下面的形状与CSS响应。矩形的宽度为其容器的80%，其中包含文本。我知道如何使用css使用边框制作三角形，但边框只接受像素。如何使整个形状具有响应性？因此，当屏幕尺寸变小且内部文本移动到一条新线时，三角形会随着矩形的增长而增长

迄今为止的代码：

<div class="wrapper">
  <p class="text">bla blah some long text here try to resize</p>
</div>

.wrapper {
  background-color: #16b629;
  width: 80%;
  position: relative;
  left: 20%;
}

.wrapper::before {
  content: "";
  position: absolute;
  left: -23px;
  bottom: 0;

  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 46px 23px;
  border-color: transparent transparent #16b629 transparent;
  z-index: 999;
}

.text {
  padding: 10px 0;
  font-size: 21px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.27;
  letter-spacing: -0.2px;
  text-align: center;
  color: #ffffff;
  text-shadow: 0.5px 0.9px 2px rgba(27, 29, 27, 0.94);
}

尝试使用transform:skew在这里作为border而不是border，因为在border技巧中，您需要在px中给出一个固定值，该值不会对内容高度做出响应

.包装纸{ 背景色：16b629； 宽度：80%； 位置：相对位置； 左：20%； } .包装工：之后{ 内容：； 位置：绝对位置； 排名：0； 左：0； 右：0； 底部：0； 背景：2bb629； 变换：倾斜-45度； 变换原点：左上； z指数：-1； } .txt{ 填充：10px0； 字号：21px； 字体大小：粗体； 字体风格：普通； 字体拉伸：正常； 线高：1.27； 字母间距：-0.2px； 文本对齐：居中； 颜色：ffffff； 文本阴影：0.5px 0.9px 2px rgba27,29,27,0.94； }

废话这里有一些长文本废话

bla-blah这里的一些长文本blah-blah-blah这里的一些长文本blah-blah-blah这里的一些长文本blah-blah-blah-blah

bla blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

---

这可以通过使用伪类来实现

.btn {
  position: absolute;
  display: inline-block;
  height:50px; width:80%;
  text-align: center;
  color: white;
  background-color: red;
  line-height: 50px;
  text-decoration: none;
  margin-left:100px;
}
.btn:after {
  content: "";
  position: absolute;
  left: -70px;
  background-color:red;
  z-index:1;
  top:50px;
  width:50px;
  height:100px;
  transform-origin:0 0;
  transform: rotate(270deg) skewY(50deg);
}

<div class="btn">Text Here!</div>

希望我能得到。

---

谢谢。

如果您希望三角形为屏幕宽度的20%，请尝试vh中的边框宽度。