文字覆盖边界？

Question

我想尝试这种效果。我创建了一个图像包装器，然后我创建了一个价格标签div，它是它的一个孩子。我已将border-left和border-bottom设置为一定数量的像素，然后我将border-left颜色更改为transparent。它创建了一个类似于上面的三角形，但是当我在价格标签div中写入内容时，它只会覆盖它的部分。

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您只想在价格标记中嵌套价格标签：

..
<div class="price-tag">
     <span class="price-val">900</span>
</div>
..

.price-tag .price-val {
   position: relative;
   top: 100px;
}

Answer 2

您应该尝试使用transform: rotate()属性来获得所需的结果。试试这段代码。

#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);
}