CSS Прямоугольник с треугольником на карте Bootstrap

Question

Я хочу сделать треугольник на границе этого прямоугольника bootstrap карточку с текстом, но я не знаю, как это сделать в CSS. Кто-нибудь может мне помочь?

<div class="card">
 <a href="#">
      <img class="card-img-top" src="https://quillota.cl/municipalidad/wp-content/uploads/2020/01/Reuni%C3%B3n-Universidad-Valpara%C3%ADso-02.jpg" alt="Card image cap">
 </a>
 <h5 class="card-header">Card title <i class="header-icon fas fa-circle-notch"></i></h5>
 <div class="card-body">
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
 </div>
 <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
 </div>
</div>

CSS

.card .card-header{
    color: white;
    background-image: linear-gradient(to right, #031d44, #283f6d, #4a6598, #6c8dc6, #90b8f6);
}
.card .card-header::before {
    position: absolute;
    top: 160px;
    right: -7.5px;
    content: "Hello World";
    color: black;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 50px solid red;
    border-bottom: 50px solid transparent;
    transform: rotate(-45deg);
}

Answer 1

<div class="card">
 <a href="#">
      <img class="card-img-top" src="https://quillota.cl/municipalidad/wp-content/uploads/2020/01/Reuni%C3%B3n-Universidad-Valpara%C3%ADso-02.jpg" alt="Card image cap">
 </a>
  <div class="corner"><span>Hello World</span></div>
 <h5 class="card-header">Card title <i class="header-icon fas fa-circle-notch"></i></h5>
 <div class="card-body">
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
 </div>
 <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
 </div>
</div>

.card{
  position:relative;
}
.corner {
  width: 0; 
  height: 0; 
  border-top: 150px solid red;
  border-bottom: 150px solid transparent;
  border-left: 150px solid transparent;
  position: absolute;
  right: 0;
}

.corner span {
  position:fixed;
  top: 30px;
  width: 100px;
  right: 5px;
  text-align: center;
  font-size: 16px;
  font-family: arial;
  transform: rotate(45deg);
  display:block;
}