在引导卡中具有三角形的 CSS 矩形

Question

我想在这个矩形引导卡的边框上用一些文本做一个三角形，但我不知道如何在 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;
}