Text overriding the border? - html

Question

I am trying to have this sort of this effect. I created an image wrapper and then I created a price tag div which is a child of it. I have set the border-left and border-bottom to a certain amount pixels and then I changed the border-left color to transparent. It creates a triangle similar to above, but when I write something inside the price tag div it just overwrites its part.
#accomodation {
min-height: 1000px;
text-align: center;
padding-top: 100px;
}
#accomodation .head-text {
font-size: 40px;
}
#accomodation .hotel-card .image-wrapper {
width: 100%;
/* overflow: hidden; */
position: relative;
}
#accomodation .hotel-card .image-wrapper img {
width: 100%;
}
#accomodation .hotel-card .image-wrapper .price-tag {
position: absolute;
bottom: 0px;
right: 0;
border-left: 150px solid transparent;
border-bottom: 150px solid #d46e4e;
z-index: 90;
opacity: 0.7;
transition: 0.2s;
color: red;
font-size: 30px;
}
#accomodation .hotel-card .image-wrapper:hover .price-tag {
transform: scale(1.1);
transform-origin: bottom right;
}
<section id="accomodation">
<h3 class="head-text">
Luxury Accomodation
</h3>
<p class="caption-text text-muted">
Duis metus sem, aliquet vitae mi eget, vehicula vehicula enim. In consectetur velit <br> lectus sollicitudin.
</p>
<div class="container mt-5">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="hotel-card">
<div class="image-wrapper">
<img src="../../photos/hotels/1-accomodation.jpg" alt="">
<div class="price-tag">
<span>900</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

Answer 1

If you just want to nest the price tag in the triange:
..
<div class="price-tag">
<span class="price-val">900</span>
</div>
..
.price-tag .price-val {
position: relative;
top: 100px;
}

Answer 2

You should try using transform: rotate() property to get the desired result. Try this code.
#accomodation {
min-height: 1000px;
text-align: center;
padding-top: 100px;
}
#accomodation .head-text {
font-size: 40px;
}
#accomodation .hotel-card .image-wrapper {
width: 100%;
position: relative;
overflow: hidden;
}
#accomodation .hotel-card .image-wrapper img {
width: 100%;
display: block;
}
#accomodation .hotel-card .image-wrapper .price-tag {
position: absolute;
bottom: -100px;
right: -100px;
z-index: 90;
opacity: 0.7;
transition: 0.2s;
color: red;
font-size: 30px;
height: 200px;
width: 200px;
transform: rotate(-45deg);
background: #d46e4e;
}
#accomodation .hotel-card .image-wrapper .price-tag span {
transform: rotate(45deg);
display: inline-block;
margin: 20px;
}
#accomodation .hotel-card .image-wrapper:hover .price-tag {
transform: scale(1.1) rotate(-45deg);
}