Question

我想在网格中的每个选定缩略图图像上创建一个模糊的三角形。

目前，我正在这样做（三角形及其div容器）：

:host ::ng-deep {

    .blurred-triangle {
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 400px 200px 0;
          border-color: transparent rgba(250, 248, 255, 0.2) transparent transparent;
        }

    .dashboard-image-selected__container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

我的问题是三角形的宽度。如果图像太大，则三角形不会填满宽度。

如何为该三角形使用100％的宽度，以使其恰好填充其父级的宽度？

Answer 1

您可以使用vw使css三角形响应。它将根据屏幕的宽度设置三角形的宽度。

如果出于任何原因需要设置最小宽度，最好使用calc（30vw + 100px）和calc（15vw + 50px）之类的方法。但是，这会使三角形大于容器，因此在这种情况下，您需要使用overflow: hidden。

.blurred-triangle {
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 30vw 15vw 0;
  border-color: transparent rgba(250, 248, 255, 0.32) transparent transparent;
}

.dashboard-image-selected__container {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  overflow: hidden;
  background-color: red;
}

<div class="dashboard-image-selected__container">
  <div class="blurred-triangle"></div>
</div>

Answer 2

您的意思是否如下：

img {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

img:hover {
  opacity: .8
}

<img src="//cdn.pixabay.com/photo/2018/07/20/22/43/adler-3551609_960_720.jpg">

HTML三角形，宽度为100％

2 个答案: