CSS响应式三角形，内部包含文本和内容

Question

我需要制作一个全屏响应三角形，该三角形将用作“标题”信息栏，如下图所示：

我有这个，但是很奇怪，不能在其中输入文字。

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.triangle-down {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20vw 50vw 0 50vw;
  border-color: #007bff transparent transparent transparent;
}

<div class="triangle-down"></div>