28172 sujets

CSS et mise en forme, CSS3

Hello

Soit un petit post-it jaune en biais tout en css3 qui constitue une div.
On me demande d'y mettre un bandeau "devis gratuit" en diagonale dans le
coin (donc incliné dans l'autre sens).

J'arrive à faire ça : http://fra.free.fr/Capture.jpg

avec :
transform: rotate(-14deg);
position:relative;
left:-4em;
top:.85em;
font-size:1em;
font-family:helvetica,arial,sans-serif;
font-weight:normal;
margin:0;
padding:0;
color:#fff;
background-color:red;

J'ai essayé overflow:hidden sans succès.

Comment empêcher que la bandeau rouge (qui fait la largeur du post-it)
ne déborde de celui-ci quand il est en biais ; mais qu'il se coule
jusqu'au bord quand même.

Merci pour votre aide.
Modifié par kerlutinoec (02 Jun 2015 - 16:00)
Bonjour,

Il faut que ta div bandeau soit imbriquée en html dans ta div post-it.
Tu pourras alors appliquer le overflow-hidden sur ta div post-it.
Elle l'est !!!

Quand il y aucune rotation (ni le post-it, ni le bandeau) ça tient dedans (même largeur).
Mais dès qu'il y rotation, le fond rouge déborde (forcément!), et un overflow:hidden n'y fait rien...
OUPS !

Je viens de comprendre mon erreur :
J'ai appliqué le overflow:hidden sur le bandeau rouge au lieu du post-it !!
En l'appliquant au post-it ça marche !

Merci !
De rien. Smiley cligne
ps: n'oublie pas de passer le sujet en [Résolu].
Modifié par Raphi (02 Jun 2015 - 11:43)