Bonjour,

j'ai des images sur ma page affichées en position absolute :

.resize-drag {
  width: 120px;
  /* This makes things *much* easier */
  box-sizing: border-box;
  position: absolute;
}

<img class="resize-drag draggable" src="../chemin" alt="image">

J'aimerai sur chaque image afficher les centres des images par un moyen utilisant css3 afin d'obtenir un résultat qui pourrait être celui ci par exemple: 

J'ai une contrainte, je ne peux ajouter aucun autre élément html pour réaliser ceci. Je dois réaliser ceci uniquement en manipulant ma classe resize-drag grâce à du CSS.

Ca fait des heures que j'essaye mais je n'y arrive pas. J'ai essayé plein de chose avec les propriétés border-image, mais je n'ai pas réussi à obtenir un résultat satisfaisant.

Avez-vous une idée ?

Merci d'avance

Bonjour romsVLM ,

Pour moi cela n'est pas possible sans une balise englobante, mais je me trompe peu être

Un exemple au cas ou:

https://codepen.io/Zonecss/pen/GdVrdb

-
Edité par AliasDmc 26 mai 2018 à 15:32:32

Bonjour  romsVLM

Avec la contrainte que vous avez, cela devient très difficile, mais tu peux tester ça

<style type="text/css"> 
.resize-drag { display:block; position:absolute; left:0%; right:0%; margin-left:auto; margin-right:auto  }
</style>

Si tes images ont une taille fixe, tu peux balancer par dessus une image transparente avec les marqueurs rouges grâce à un ::after qui contient cette dernière image en background avec 100% de hauteur et largeur, position absolute, left top à 0 et display block et content: ' ';

Si c'est pas le cas malheureusement il n'y a que deux élément "cheat" qui permettent d'ajouter du contenu visuel via css, c'est ::after et ::before. Or tu as 4 éléments en plus ici, un marqueur sur chaque coté. Je ne pense pas que ce soit réalisable sans toucher au DOM.

Bonjour,

et surtout, <img /> n'autorise pas les pseudo-éléments car c'est un élément remplacé : son contenu est ajouté après le chargement du DOM, et il écrase le contenu généré par ::after et ::before.

Sans au minimum un autre élément englobant je pense que ce qui est demandé est impossible.

Avec un pseudo-élément on peut probablement faire deux traits, via un gradient CSS entre rouge et transparent ; donc avec les deux disponibles, ça devrait se faire. Maiiiis comme dit plus haut, sur <img /> on ne peut pas.