Partage

Comment réalisé ceci en html & css

10 octobre 2017 à 21:22:37

Bonjour, j'ai fais une maquette d'un site que j'aimerais creer, cependant au niveau de ma barre de navigation je ne vois pas comment réalisé le coté rouge/rosé de la barre de navigation en html & css ou il y a écrit connexion | inscription

Screen: 

Anonyme
10 octobre 2017 à 23:41:21

Hello,

voici un exemple avec uniquement de la CSS:

fiddle

A modifier selon tes envies,taille, pour qu'il soit responsive, ect... ;)

11 octobre 2017 à 9:30:26

Salut,

Tu peux aussi regarder du côté des pseudo-éléments :before et :after pour réaliser ce genre de chose.

13 octobre 2017 à 12:59:31

Peut tu me montrer un exemple, je comprend pas très bien comment utilisé :before et :after dans ce cas ci
13 octobre 2017 à 13:23:12

Hello,

Comme ça : https://jsfiddle.net/49cqpebm/

Autre coup de main que j'avais filé à un gars sur le forum avec les pseudo-éléments : https://codepen.io/Chaaampy/full/ZKNdrx/

13 octobre 2017 à 13:52:56

Alors voila je vais evité de recrée un autre poste, j'ai tentez de faire un skew pour donné un angle et d'en remettre un pour uniquement remettre le texte droit, voila le résultat: (deux bouton connexion - inscription)

(Désolé pour la qualité de l'image)

Et j'ai un petit probleme situé ici: 

Comment puis-je enlevé cette espace blanc? Merci de votre aide

13 octobre 2017 à 14:00:53

Tu peux placer un pseudo-éléments à droite de ton rectangle, et lui donner une forme carré afin de masquer l'espace blanc, parce que je pense pas que tu puisse appliquer skew que sur un côté.
Anonyme
13 octobre 2017 à 14:35:40

Tu peux aussi mettre un background avec dégradé à ton élément qui englobe ta div "connexion-inscription" et celle où il y a écrit "Bryan", histoire de cacher le blanc.

Faut juste bien placer les valeur du dégradé.

Comment réalisé ceci en html & css

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