html - 使边框宽度响应

Question

我使用边框在图像上创建了一个三 Angular 形叠加层。

HTML 和 CSS

.hp-product-item {
  position: relative;
}

.hp-product-item img {
  max-width: 500px;
  width: 100%;
}

.hero-overlay {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 120px 0 0 500px;
  border-color: transparent transparent transparent #F9FAFB;
}

.hero-text {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

<div class="hp-product-item">
  <img src="https://images.unsplash.com/photo-1516703914899-e8303d01329a?ixlib=rb-0.3.5&s=9ebf86cdab3a1c7319ff15b16d09b1f7&auto=format&fit=crop&w=1350&q=80">
  <div class="hp-product-text">
    <div class="hero-overlay"></div>
    <div class="hero-text">
      <h2>Test</h2>
      <p>Testing this</p>
    </div>
  </div>
</div>

效果很好，我唯一的问题是响应能力。因此，当图像由于 100% 宽度 而变小时，边框变得太大，它会重叠并导致布局中断。现在我可以使用媒体查询更改 border-width 但有更好的方法吗？

我还创建了一个 fiddle

Answer 1

使用 vw 和 vh 而不是 px，这样单位是相对于视口(viewport)大小的。

只是简短的例子 fiddle