宽度为 100% 的 HTML 三 Angular 形

Question

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

现在我是这样做的(三 Angular 形和它的 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%;
    }
}

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

我怎样才能为这个三 Angular 形使用类似 100% 的宽度，以便它正好填满它父级的宽度？

Answer 1

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

如果出于任何原因需要设置最小宽度，最好使用 calc(30vw + 100px) 和 calc(15vw + 50px) 之类的方法。但是，这会使三 Angular 形大于容器，因此在这种情况下您需要使用 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>