web-dev-qa-db-fra.com

Décaler une bordure sur une image

J'essaie de créer exactement comme ce qui est montré dans l'image ci-dessous. J'ai aussi essayé d'autres méthodes en utilisant les méthodes de contour et offset, mais je ne savais pas comment faire pour continuer.

 image with an offset border

Voici le JSFiddle :

img {
  border: 4px solid green;
}
<img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" alt="services_gas_oil" border="0">

Comment faire pour que cette bordure décalée recouvre l'image?

htmlcsscss3border
17
Elaine Byene

Enveloppez l'image avec un bloc en ligne et définissez un pseudo-élément à positionner absolument comme bordure:

body {
  padding: 50px 0 0 80px;
}

.imageContainer {
  display: inline-block;
  position: relative;
}

.imageContainer::before {
  position: absolute;
  top: -5%;
  left: -15%;
  width: 100%;
  height: 100%;
  border: 4px solid #77B244;
  content: '';
}
<div class="imageContainer">
  <img src="https://cdn.pixabay.com/photo/2013/07/31/12/25/cat-169095_960_720.jpg" alt="services_gas_oil" border="0">
</div>

20
Ori Drori

Une méthode plus simple consisterait à utiliser une combinaison de bordure, contour et un négatif contour-offset . Voici un exemple :

img{
  outline:4px solid #77B244;
  outline-offset:-100px;
  border:50px solid transparent;
  border-width:150px 50px 50px 150px;
  margin:-75px 0 0 -75px;
}
<img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" alt="services_gas_oil" border="0">

Cela empêche l'utilisation d'un élément parent et d'un pseudo-élément.

11
web-tiki

Une autre possibilité consisterait à envelopper l'image dans un élément div ayant une bordure et à déplacer l'image à l'intérieur du conteneur vers la gauche et vers le bas.

A partir de Documentation :

Un élément relative position est un élément dont la valeur calculée position est relative. Les propriétés top et bottom spécifient le décalage vertical par rapport à sa position normale; les propriétés left et right spécifient le décalage horizontal.

Nous devrons insérer img dans un élément tel que div c'est-à-dire:

<div class="image-holder">
  <img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" >
</div>

Nous appliquerons border au conteneur et déplacerons l'image de sa position normale avec le code CSS suivant:

.image-holder img {
  position: relative;
  z-index: -1;
  left: 40px;
  top: 40px;
}


.image-holder {
  border: 7px solid #76af46;
  display: inline-block;
  vertical-align: top;
}

.image-holder img {
  position: relative;
  z-index: -1;
  left: 40px;
  top: 40px;
}
<div class="image-holder">
  <img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" alt="services_gas_oil" border="0">
</div>

Alternativement, nous pouvons également utiliser CSS3 translate().

.image-holder img {
  transform: translate(40px, 40px);
  position: relative;
  z-index: -1;
}


.image-holder {
  border: 7px solid #76af46;
  display: inline-block;
  vertical-align: top;
}

.image-holder img {
  transform: translate(40px, 40px);
  position: relative;
  z-index: -1;
}
<div class="image-holder">
  <img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" alt="services_gas_oil" border="0">
</div>

0
Mohammad Usman