28111 sujets

CSS et mise en forme, CSS3

[Résolu] Pseudo-élément SVG difficile

Bonjour tout le monde,

Je lutte avec une idée de design que j'aimerais mettre en place en css pour un formulaire de contact :
upload/1623425226-65880-screenshot21.jpg
(ne prêtez pas attention aux détails, c'est de la maquette à l'arrache mais l'idée est là)

J'ai pensé à un pseudo-élément avec background svg, mais je n'arrive pas à le mettre en place, et je me dis que ce n'est peut-être pas la solution la plus propre car elle ne s'adaptera pas forcément à la taille de l'input du formulaire. Si vous avez une idée je veux bien un conseil !
Modérateur
Salut,

Si t'es chaud tu peux faire un truc avec les pseudo before et after et jouer avec la transformation skew : https://jsfiddle.net/undless/g8jL0vwk/

<div class="test">
  <input type="text">
</div>

.test {
  border:2px solid #000;
  position:relative;
  display:inline-block;
  box-sizing: border-box;
}
 .test input {
   border: 0;
 }

.test::before {
  content: "";
  position:absolute;
  top: 100%;
  left: 0;
  height: 10px;
  width: 100%;
  background: yellow;
  border: 2px solid #000;
  border-top: none;
  border-right: none;
  transform-origin: top left;
  transform: translate(-2px, 2px) skewX(45deg);
}
.test::after {
  content: "";
  position:absolute;
  top: 0;
  left: 100%;
  height: 100%;
  width: 8px;
  background: yellow;
  border: 2px solid #000;
  border-bottom: none;
  border-left: none;
  transform-origin: top left;
  transform: translate(2px, -2px) skewY(55deg);
}


suffit de calculer deux ou trois truc pour bien caller le bousin (j'avoue j'ai fait un peu au pif Smiley sweatdrop )

Bonne journée
Meilleure solution
Merci beaucoup à vous deux, j'aime beaucoup vos deux solutions ! Je vais plutôt opter pour celle de _laurent qui me semble plus simple niveau code, mais les deux fonctionnent très bien !
Je n'avais pas pensé à la transformation skew, c'est mille fois plus simple que les éléments svg que j'essayais d'utiliser et qui se déformaient à chaque variation de taille de l'input.

Je ne pouvais pas vous fournir mon code car mon projet n'en est qu'au stade de maquette actuellement, mais ce sera implémenté sur un formulaire via Wordpress Smiley cligne

A une prochaine fois !
Sujet clos
Aller à