Partage

[Problème] CSS et positionnement avec rotate ?

14 mai 2018 à 11:10:32

Bonjour, je cherche à faire en sorte que pour n'importe quel largeur/hauteur d'écran je garde une présentation fixe comme ceci :

J'ai essayé de mettre une <div> qui est tourné, mais le problème c'est que des que je redéfinie la taille de l'écran ma disposition change :

Quelqu'un saurait-il résoudre ce problème ? 

Merci :p

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
17 mai 2018 à 10:25:52

A première vue je dirais de jouer en pourcentage sur la dimension de ta div pour qu'elle s'adapte et soit responsive. J'avais eu un problème similaire mais je ne parviens pas à me rappeler comment je l'avais résolu ^^"

Pourrais tu poster ton CSS et ton HTML ? :) 

17 mai 2018 à 11:50:59

Bonjour,

Pas si simple ; voici une approximation: Démo jsbin

<div class="test"></div>

CSS

.test{
  border:5px ridge grey;
  height:50vw;
  position:relative;
  overflow:hidden;
}

.test::before{
  content:'';
  position:absolute;
  right:0;
  top:-12vw;
  transform:rotate(-10deg);
  height:20vw;
  width:100vw;
  background:crimson;
  border-bottom:5px ridge red;
}




"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
17 mai 2018 à 15:59:57

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
17 mai 2018 à 19:28:39

Bonjour Modjii,

Une autre proposition ou tu peux spécifier facilement la longueur du coté gauche du triangle

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

Découvrez les Css avec la zonecss.fr

[Problème] CSS et positionnement avec rotate ?

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown