响应式风格div与css三角形

Question

我正在尝试使用每侧的css三角形编写一个响应div，其颜色与我的背景颜色相同，但是当文本换行到新行时会中断。

有没有办法以响应的方式对css三角形进行编码，其中三角形的高度会随着包裹的文本一起增长？

.d-block {
  background-color: #fff;
  height: 60px;
  padding: 0;
  margin: 30px 0 0 0;
  color: #0769ba;
  font-size: 1.8rem;
  &:before {
    position: absolute;
    left: 0;
    content: "";
    border-top: 30px solid #fff;
    border-bottom: 30px solid #fff;
    border-left: 30px solid #0769ba;
  }
  &:after {
    position: absolute;
    right: 0;
    content: "";
    border-top: 30px solid #fff;
    border-bottom: 30px solid #fff;
    border-right: 30px solid #0769ba;
  }
}

<div class="d-block">This is a specials block and is 100% wide responsive</div>