如何实现页面角落三角形div与照片同层级及轻微重叠效果

调整DOM层级关系 #

将原本嵌套在三角形div内部的图片元素移出，使二者成为同级兄弟节点，调整后的HTML结构：

<div id='triangle-topleft'></div>
<img id="photo" src="photo.png">

优化CSS定位逻辑 #

保留原有三角形的形状绘制规则，通过调整位置、层级属性实现轻微重叠效果，完整CSS代码如下：

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 350px solid #66CCFF;
    border-right: 350px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#photo {
    position: absolute;
    left: 185px;
    top: 185px;
    z-index: 2;
}

细节说明 #

• 原三角形直角边长度为350px，斜边端点坐标为(350px, 0)与(0, 350px)，中点位置为(175px, 175px)；将图片左上角定位在(185px, 185px)时，会在斜边位置形成约10px的轻微重叠，既不会遮挡过多三角形区域，也不会出现完全脱节的情况
• 原图片样式中的float: left属性在元素启用绝对定位时无实际作用，建议删除避免额外样式干扰
• 可根据视觉需求微调left、top的数值：数值越小，重叠比例越高；数值越大，两个元素错位越明显
• 若需要三角形压在图片边角上方，只需互换两个元素的z-index值即可

内容的提问来源于stack exchange，提问作者Json