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

.corner i:first-of-type {
  border-top: solid;
  border-right: solid;
  margin: 0 0 auto auto;
}

.corner i+i {
  border-bottom: solid;
  border-left: solid;
  margin: auto auto 0 0;
}

img {
  margin: 1em;
}

<div class="corner">
  <img src="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>
  <img src="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)),#0000 90deg,#000 0) bottom left,
    conic-gradient(from 180deg at calc(100% - var(--b)) var(--b),#0000 90deg,#000 0) top right;
  background-size:60px 50px; /* and this */
  background-origin:border-box;
  background-repeat:no-repeat;
}

<img src="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);

<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="https://blog.cyclop.in/wp-content/uploads/2020/08/UNNAME1-977x720.jpg" loading="lazy"/></div>
  <div></div>
  <div id="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;