Coin oblique

bonjour
J ai une image raster que je souhaite convertir entièrement en html/css .
Je code un widget avec des bords obliques ( 45°) en utilisant les pseudo éléments before /after et les propriété z-index, transparent . J'ai un problème au niveau des obliques car l'épaisseur du trait fait 8 pixels mais la jonction n'est pas précise : mes valeurs en px sont inexactes ( position et taille) . Y a t-il une méthode de calcul / placement pour coder ce genre de coin ? L 'utilisation de transform et rotate est elle plus judicieuse / facile ?







Modifié par 75lionel (15 Feb 2015 - 17:13)

Salut 75lionel,
un calcul pas trop compliqué résoudrait peut-être une partie de ton problème, si toutefois je l'avais bien compris.

Pour avoir la même épaisseur de trait, lors d'un segment incliné à 45° :
- sachons que la [racine carrée de 2] = 1.4142...
- pour le segment incliné à 45°, son épaisseur initiale (pseudo 8px) sera multipliée par le nombre obtenu ci-avant :
8px * 1.4142... = laValeurQueTuCherches = 11.3137...px = 11px

Sera-ce une bonne approche de la solution ?
Modifié par senteur_honrable (15 Feb 2015 - 19:35)

Après avoir essayer la technique de transform ( pas exacte mais plus facile /mieux ) je réalise après lecture de votre réponse que dans la technique pseudo élément je continuais à penser que les axes de références ( x , y ) s obliquait aussi alors que non ( oui dans le cas des fonctions transform). Donc oui 11 px vertical = 8 px pour width oblique .Mais ... mes obliques sont obtenus avec des pseudo éléments triangles ... et le problème semble plus complexe : Il faut trouver la taille des shapes des triangles et bien les placer pour simuler une bordure . Le but de combiner 2 shapes triangle est la possibilité d'avoir un triangle transparent externe .La partie blanche interne ne dépasse pas la zone noire et donc l image de fond est visible (vert et pas blanche sur la photo)


Merci
Modifié par 75lionel (15 Feb 2015 - 20:31)