CSSで描画した図形の上にテキストを重ねたい

Question

前提・実現したいこと

CSSで描写した、グラデーションのかかっている三角形の上に
テキストを乗せたいのですが、テキストが後ろに回り込んでしまします。
positionやz-indexなどを試しましたが、上手く動いてくれません

該当のHTML

<div class="triangle"><div class="contents">
<h1>Title</h1>
<p>
text text text text text text text text text 
</p>
</div>

該当のCSS

.contents{
 text-align:center;
 margin:5%;
 padding:10px;
 font-size:x-small;
 position: absolute;
}

.trianlgle {
  margin       : auto;
  overflow     : hidden;
  position     : relative;
  width        : 326px;
  height       : 277px;
}
.triangle::after {
  content      : "";
  position     : absolute;
  width        : 231px;
  height       : 231px;
  background   : linear-gradient(135deg, #ffffff, #000000, #000000);
  top          : 162px;
  left         : 47px;
  transform    : scaleY(1.7)
                 rotate(45deg);
}

試したこと

前述のとおり、z-indexを使ったり、triangleを別のdivで囲って、このdivにposition: relative;をあてたりしましたが、上手く動きませんでした。

完成したい形

Comments

[yambejp]

手書きでいいので画像にしてアップしてください

[wawako]

ご返信ありがとうございます。
追加いたしました。よろしくお願いいたします。

Answer 1

.triangle::after 
↓↓↓
.triangle::before

はダメでしょうか？

Comments

[wawako]

ありがとうございます！無事に望んだ形になりました。

::beforeは盲点でした。ありがとうございます。