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

问题描述

我需要能够将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>

这篇关于如何在CSS3网格中将一个单元格覆盖到其他两个单元格上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！