时间戳

首页 > 解决方案 > Html triangle with 100% width

html - Html triangle with 100% width

问题描述

I want to create a blurred triangle shape on each selected thumbnail image in a grid.

For now I'm doing it like this (the triangle and it's div container): 

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

My issue is the width of the triangle. If the image is too large the triangle don't fill the width.

How can I use something like 100% width for this triangle shape so that it fills exactly the width of it's parent ?

标签： htmlcsssass

解决方案

You can use vw to make the css triangle responsive. It will set the width of the triangle based on the width of the screen.

It may be better to use something like calc(30vw + 100px) and calc(15vw + 50px) if you need to set a minimum width for any reason. However this will make the triangle larger than the container so you'll need to use overflow: hidden in this case.

.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>

推荐阅读