Question

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

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% width边框变得太大而导致图像变小，因此重叠并导致布局中断。现在我可以使用媒体查询更改border-width但是有更好的方法吗？

我还创建了fiddle

Answer 1

您可以尝试使用viewport sized typography - [vw] and [vh]代替[px]。

简短示例fiddle

Answer 2

您可以使用线性渐变而不是属性支持百分比单位的边框，您必须移动到叠加层之外...就像示例

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

Answer 3

也许你可以尝试设置白色背景并旋转类.hero-overlay？

Fiddle示例

.hp-product-item {
    max-width: 500px;
    overflow: hidden;
    position: relative;
}
.hp-product-item img {
  width:100%;
}
.hero-overlay {
    background-color: #f9fafb;
    bottom: -230px;
    height: 250px;
    left: -100px;
    position: absolute;
    transform: rotate(15deg);
    width: 1000px;
}
.hero-text {
  position: absolute;
  bottom:10px;
  left:10px;
}

使边框宽度响应

3 个答案: