试图制作一个由边框组成的三角形以在 1200px 处停止扩展

Question

我想知道是否有人可以提供帮助，显示它的最简单方法是这里的临时 url：http://norsk-kulturhus-nettverk.a.heltblank.no/

这是最上面的图片。灰色三角形应始终遵循图像大小。有人有什么建议吗？

编辑：试过这个：

.content-type-homepage .grid-section-article-wide .grid-rte {
    width: 0; 
    height: 0; 
    border-top: 20vw solid rgba(242,242,242, 1); 
    border-right: 100vw solid transparent; 
    position: absolute; 
    top: 0; 
    z-index: 99;
}

Answer 1

这是您编辑的 css。只需将 100vw 替换为您需要的值

.content-type-homepage .grid-section-article-wide .grid-rte {
    width: 0; 
    height: 0; 
    border-top: 20vw solid rgba(242,242,242, 1); 
    border-right: 1200px solid transparent; 
    position: absolute; 
    top: 0; 
    z-index: 99;
}

Answer 2

您可以使用媒体查询来查找浏览器何时达到特定大小，然后开始更改 border 属性。

我已经在您上面提供的 URL 上进行了测试，它似乎可以正常工作。

.content-type-homepage .grid-section-article-wide .grid-rte {
    width: 0; 
    height: 0; 
    border-top: 20vw solid rgba(242,242,242, 1); 
    border-right: 100vw solid transparent; 
    position: absolute; 
    top: 0; 
    z-index: 99;
}

@media (min-width:1200px) {
    .content-type-homepage .grid-section-article-wide .grid-rte {
        border-right: 1200px solid transparent;
    }
}

试图制作一个由边框组成的三角形以在 1200px 处停止扩展

Trying to make a triangle made of borders to stop expanding at 1200px

html

css

border

responsive-design

css-shapes