Make border width responsive

Question

I've created a triangle overlay over an image using borders.

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

This works great, my only problem is responsiveness. So as the image gets smaller due to the 100% width the border becomes too big it overlaps and causes the layout to break. Now I could change the border-width with media queries but is there a better way to do this?

I've also created a fiddle

Answer 1

Use vw and vh instead of px so the units are relative to viewport size.

Just short example fiddle

Answer 2

You can use linear gradients instead of border that property supports percentage units, you will have to move outside your overlay... just like the example

FIDDLE

.hp-product-item {
  position: relative;
  display: inline-block;
}
.hp-product-item img {
  max-width:500px;
  width:100%;
}
.hero-overlay{
  position:absolute;
  bottom:0;
  width: 100%;
  height: 100%;
  background: linear-gradient(19deg, #ffffff 25%, rgba(0,0,0,0) 25%);
}
.hero-text {
  position: absolute;
  bottom:10px;
  left:10px;
}