Question

我想知道是否有人可以提供帮助，最简单的方式来显示它是临时网址：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

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

我已在您上面提供的网址上对此进行了测试，但它似乎正在运作。

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

Answer 2

这是你的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;
}

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

2 个答案: