Partage
  • Partager sur Facebook
  • Partager sur Twitter

Tableau flèche

Modifier le border d'un tableau de tel sorte à en faire une flèche

Sujet résolu
16 juillet 2018 à 13:27:37

Bonjour quelqu'un aurais un moyen svp de faire un tableau comme celui ci, j'ai chercher partout en vain.

  • Partager sur Facebook
  • Partager sur Twitter
16 juillet 2018 à 13:38:24

Bonjour 

Oui il existe un moyen ! 

Tu crée une <div> où tu ajoutes un paragraphe dedans.

Cette <div>, tu l'encadres grâce à un border.

Tu créer ensuite plusieurs pseudo éléments (::after ou ::before) ou tu va créer des carrés.

Pour la pointe de la flèche, tu fais un carré et tu utilises la propriété de rotation pour en faire un losange. Tu caches les bordures que tu ne souhaite pas afficher.

Et pour finir, tes pseudo éléments seront en position absolute de ta <div> principale avec différent Z-index.

Voilà :)

  • Partager sur Facebook
  • Partager sur Twitter
16 juillet 2018 à 20:58:00

Bonjour Yusstonn,

Je t'ai fait un exemple :

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

Il faudra juste faire peut être un modifier d'un pixel le margin-top de .wdg-fleche:after du code Css compilé ( il tombe pas forcement juste )

-
Edité par AliasDmc 18 juillet 2018 à 18:53:22

  • Partager sur Facebook
  • Partager sur Twitter
Découvrez les Css avec la zonecss.fr
10 août 2018 à 13:06:21

Bonjour,

Merci beaucoup pour votre aide.

  • Partager sur Facebook
  • Partager sur Twitter