[Résolu] Bandeau en position absolue et bordure

Bonjour à tous,

Sur un design de présentation d'une programmation musicale, chaque évènement à un genre musical que j'affiche dans un petit bandeau incliné en position absolue.

Mon problème : le bandeau ne passe pas au-dessus des bordures de son élément parent et je trouve ça un peu moche

La capture d'écran ci-jointe sera sûrement plus claire.



Avez-vous une idée de comment faire pour que le bandeau puisse passer au-dessus des bordures du parent ? J'ai testé pas mal de trucs mais rien n'y fait, je sèche...

J'ai tout intégré à un codepen pour que ce soit plus simple

https://codepen.io/Loraga/pen/jOyPaNe

Merci d'avance pour votre précieuse aide

Bonjour,

C'est quoi exactement le rendu que tu souhaites ?

EDIT: j'avais proposé une solution partielle, mais je viens de la retirer car elle ne marche pas.

Amicalement,
Modifié par parsimonhi (24 Mar 2021 - 13:40)

Salut Parsimonhi,

Merci pour ton aide ! J'avais hélas déjà essayé le box-sizing, aucun effet
J'ai aussi essayé d'autres méthodes moins élégantes avant de poster ici, sans succès ^^

Voilà le rendu que je souhaite obtenir :



J'avais immédiatement pensé à box-sizing pour réussir à faire passer le bandeau par-dessus la bordure, ça me semblait logique...

Bonjour,
oui, on ne sait pas exactement ce que tu veux. Si c'est pour faire basculer le bandeau sur lui-même pour qu'il "rentre" dans le header, il faut jouer sur transform: rotate(); Je viens d'essayer sur le codepen. Avec -6deg il restera en biais mais dans le header, avec -0deg, il sera droit. Plus besoin de transform:rotate pour faire ça.
Sinon je le trouve très bien comme ça, on dit partout dans le design qu'il faut briser les figures trop carrées, les blocs trop bien rangés. Un peu de biais ne nuit pas. Surtout que l'image de fond est déjà dans une perspective inclinée, avec des cymbales en opacité.
Un collègue dans la musique ? Je vois beaucoup de hard, des synthés, c'est un studio ?

Sinon en vrac et un peu moins joli :

- si tu ne veux pas rajouter le border sur event_display tu peux rajouter un container à l'intérieur de event_container pour faire le border
- tu peux aussi mettre un padding de 2px sur event_container plutôt qu'un border (et éventuellement un box-shadow interne pour donner une couleur)

Bonne aprem !
Modifié par _laurent (24 Mar 2021 - 14:19)

a écrit :
Mets ton border sur .event_display plutôt que sur event_container non ?

Merci Laurent ! Pourquoi faire simple quand on peut faire compliqué ?
Je n'y avais pas pensé...

a écrit :
(et de toute façon, tout ce que fait _laurent est bien Smiley smile )

C'est clair, mais vous m'avez tous toujours bien aidé dans des situations plus ou moins complexe. Merci pour votre aide et vos bons conseils

a écrit :
Un collègue dans la musique ? Je vois beaucoup de hard, des synthés, c'est un studio ?

On est un centre de formation artistique (on forme des musiciens et des techniciens du son, on a un studio et une salle de concert), et en dehors du covid on a aussi une programmation musicale variée

Merci à tous
Modifié par Loraga (24 Mar 2021 - 15:22)

parsimonhi a écrit :
Au vue de l'image du rendu souhaité, je pense comme _laurent (et de toute façon, tout ce que fait _laurent est bien ).

Ooooh que non hahaha je me plante souvent !