代码之家 › 专栏 › 技术社区 › An-droid

带100%宽度的HTML三角形

sass css html

An-droid · 技术社区 · 7 年前

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

现在我是这样做的(三角形,它是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%的宽度来填充这个三角形,使它正好填充它的父级的宽度?

2 回复 | 直到 7 年前

OrderAndChaos 7 年前

你可以用 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>

SuperDJ Franklin Rivero 7 年前

你的意思是这样的吗?

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

推荐文章

ineedtoknow · 如何以重复模式(蓝色、紫色、红色)为儿童应用背景色[重复]

7 月前

user p · 如何修复Angular Material侧边栏的滚动问题

8 月前

Samvel · 无法通过sass模块编译scss文件

12 月前

Frankey · :not()CSS伪类未按预期工作

1 年前

Patrick Kenny · 如何将全局SCSS文件添加到Svelte/SvelteKit?

1 年前

Ch. · scs中@media的误导最小宽度和最大宽度

1 年前

Yiu Chak · 错误:“…m 55%在右侧”后无效CSS

1 年前

Sudeepa T · 无法定位元素[重复]

1 年前

kold-kreator · 编辑Bootstrap 5卡盒阴影的SASS

1 年前

JuliaBland299 · 如何使链接不占用网格中的空间?

1 年前