现在可以在移动的幻灯片中添加一个三角形的角了吗？

Question

我正在使用Bootstrap 4 Slider，并且我想应用以下可单独使用的CSS：

.container-p{
  width: 600px;
  height: 500px;
  position:relative;
  background-color:grey;
}

.corner {
  width: 0;
  height: 0;
  border-top: 300px solid #ffcc00;
  border-bottom: 300px solid transparent;
  border-left: 300px solid transparent;
  position:absolute;
  float: right;
  right:0;
}

.corner span {
  position:absolute;
  top: -220px;
  width: 250px;
  left: -220px;
  text-align: center;
  font-size: 30px;
  font-family: arial;
  transform: rotate(45deg);
  display:block;
  font-weight: bold;
}

<div class="container-p">
  <div class="corner"><span>Comercio local</span></div>
</div>

问题是我想将这个三角形应用于“轮播项目”，因此我的全屏滑块会显示每个幻灯片的类别。为此，我在轮播项目旁边添加了课堂角。

<div class="carousel-item corner"></div>

但我得到的只是白色背景。

我在做什么错了？

PD：每张幻灯片的内容都是一张带有几个词的图片。