如何在CSS3网格中将一个单元格覆盖到其他两个单元格上-前端问题

How to overlay a cell over two others in a CSS3 grid(如何在CSS3网格中将一个单元格覆盖到其他两个单元格上)

本文介绍了如何在CSS3网格中将一个单元格覆盖到其他两个单元格上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要能够将CSS3网格中心单元格中的图像覆盖到其他两个单元格上：一个在网格的右上角，另一个在网格的左下角。如下所示：

所以我想尝试使用网格以某种方式将具有角边界的单元格放在包含图像的中央单元格的下方。我做了一个3x3的网格，放置了相应的边框，到目前为止得到了这个：

这是html和css代码：
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.informacion-imagen { display: grid; grid-gap: 1px; grid-template-columns: 3rem auto 3rem; } #img-info { width: 100%; max-width: 320px; height: auto; } #corner-top-right { height: 3rem; border-top: 6px solid black; border-right: 6px solid black; } #corner-bot-left { height: 3rem; border-bottom: 6px solid black; border-left: 6px solid black;

<div class="informacion-imagen"> <div></div> <div></div> <div id="corner-top-right"></div> <div></div> <div><img id="img-info" aria-hidden="true" src="assets/img/imagen-informacion.webp" loading="lazy"/></div> <div></div> <div id="corner-bot-left"></div> <div></div> <div></div> </div>

从现在开始，我不知道如何解决我需要什么才能获得想要的结果。我在网上看了很久，但这似乎太具体了。如有任何帮助，我将不胜感激。提前谢谢。

推荐答案
在单个单元格内使用几个伪元素，并根据需要对齐它们。不需要其他的HTML。
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

body { text-align: center; } div { margin:.5em; display: inline-grid; } img { margin:.5em; grid-column:1; grid-row:1; } div:before, div:after{ content:""; border-width:2px; border-style:solid; border-color: black transparent transparent black; width:2em; height:2em; grid-column:1; grid-row:1 } div:after { justify-self:flex-end; align-self:flex-end; border-color: transparent black black transparent; }

<div> <img src="http://www.fillmurray.com/300/200" alt=""> </div>