How To Overlay A Cell Over Two Others In A Css3 Grid

I need to be able to overlay an image in the center cell of a CSS3 grid over two other cells : one in the top-right corner and the other on the bottom left corner of the grid. Like

Solution 1:

similar answer to Positioning of a Absolute Element in relation to a responsive image

grid alows you to set a few elements inside a single cell, alignement can be done simply via margin:

example

div.corner {
  display: grid;/* default will be grid of a single column */width:max-content;
  margin:auto;
}

div>* {/* put everything into the same cell */grid-row: 1;
  grid-column: 1;
}

i {
  height: 3rem;
  width: 3rem;
}

.corneri:first-of-type {
  border-top: solid;
  border-right: solid;
  margin: 00 auto auto;
}

.corneri+i {
  border-bottom: solid;
  border-left: solid;
  margin: auto auto 00;
}

img {
  margin: 1em;
}

<divclass="corner"><imgsrc="https://picsum.photos/id/1015/300/200" /><i></i><i></i><!--Why not , are these alike icones ? --></div>

Solution 2:

Use a a couple of pseudo-elements inside a single cell grid and align them as necessary. No additional HTML required.

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><imgsrc="http://www.fillmurray.com/300/200"alt=""></div>

Solution 3:

I would go with less code using 2 gradients as background

img {
  --b:5px; /* adjust this */border:10px solid #0000; /* this */background:
    conic-gradient(from 0deg   at var(--b) calc(100% - var(--b)),#000090deg,#0000) bottom left,
    conic-gradient(from 180deg at calc(100% - var(--b)) var(--b),#000090deg,#0000) top right;
  background-size:60px50px; /* and this */background-origin:border-box;
  background-repeat:no-repeat;
}

<imgsrc="https://picsum.photos/id/1069/200/200" >

Solution 4:

Although using css grid to just chuck in L shapes around an image is an overkill, the technique I would use regardless of css grid is css positioning and divs with borders(like you already have). There are other ways also like :before or :after pseudo selectors as well.

.informacion-imagen {
    display: grid;
    grid-gap: 1px;
    grid-template-columns: 3rem min-content 3rem;
    justify-content: center;
}

#img-info {
    width: auto;
    max-width: 320px;
    height: auto;
}

#corner-top-right {
    height: 3rem;
    border-top: 6px solid black;
    border-right: 6px solid black;
    position: relative;
    left: calc(-100% + 15px);
    bottom: calc(-100% + 15px);
}

#corner-bot-left {
    height: 3rem;
    border-bottom: 6px solid black;
    border-left: 6px solid black;
    position: relative;
    right: calc(-100% + 15px);
    top: calc(-100% + 15px);

<divclass="informacion-imagen"><div></div><div></div><divid="corner-top-right"></div><div></div><div><imgid="img-info"aria-hidden="true"src="https://blog.cyclop.in/wp-content/uploads/2020/08/UNNAME1-977x720.jpg"loading="lazy"/></div><div></div><divid="corner-bot-left"></div><div></div><div></div></div>

Take a note of the following addition css I used:

grid-template-columns: 3rem min-content 3rem;
justify-content: center;