I'm trying to CSS put a yellow square below an image, as shown in the picture below, but I can't. Does anyone have any suggestions on how I can make this effect?

HTML:

<div >
     <picture >
           <img src="assets/photo-perfil.jpg" alt="photo">
     </picture>
</div>

CSS:

.photo-perfil {
    display: block;
    margin: 30px;
    border: 2px solid yellow;   
}

CodePudding user response：

You can use a pseudo-element to produce that additional visual decoration, with several tricks:

• Use width: min-content on the parent to shrink-wrap it
• Relatively position the <img> element so it will stack above the absolutely positioned pseudo-element

See proof-of-concept below:

.photo-perfil img {
  position: relative;
  display: block;
}

.photo-container {
  position: relative;
  width: min-content;
}

.photo-container::before {
  position: absolute;
  content: '';
  display: block;
  border: 2px solid yellow;
  width: 100%;
  height: 100%;
  transform: translate(16px, 16px);
  box-sizing: border-box;
}

body {
  background-color: #000;
}

<div >
  <picture >
    <img src="https://via.placeholder.com/150x150" alt="photo">
  </picture>
</div>

CodePudding user response：

You could try doing:

.photo-perfil {
  display: inline-block;
  margin: 30px;
  border: 2px solid yellow;
}

img {
  margin-top: -20px;
  margin-left: -20px;
  padding-right: 20px;
  padding-bottom: 20px;
}

May not be the best solution but it does the job.