web-dev-qa-db-fra.com

Comment incliner un élément tout en conservant un texte normal (non modifié)

Est-il possible de reproduire cette image en utilisant uniquement du CSS?

enter image description here

Je veux appliquer ceci à mon menu, de sorte que le fond marron apparaisse sur hover instance

Je ne sais pas comment faire cela, je n'ai que;

.menu li a:hover{
     display:block;
     background:#1a0000;
     padding:6px 4px;
}
csscss3css-shapes
62
Preston

skew un élément parent (LI) et inclinaison inverse ce sont des éléments enfants

CSS Menu skewed buttons diagonal borders

nav li {
  display:inline-block;
  transition: background 0.2s;
  transform: skew(20deg);  /* SKEW */
}
nav li a {
  display:block;
  text-decoration:none;
  padding: 5px 10px;
  font: 30px/1 sans-serif;
  transform: skew(-20deg); /* INVERSE SKEW */
  color: #0bf;
}
nav li.active,
nav li:hover{
  background:#000;
}
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
115
Roko C. Buljan

Voici un violon à utiliser avec différents navigateurs - j'ai créé en quelques minutes.

Essayez de jouer avec les arguments, j'ai utilisé :before et :after pour faire ça.

https://jsfiddle.net/DTBAE/

10
udidu

Vous pouvez utiliser la propriété transform: skew(X, Y) pour y parvenir. Créez un conteneur externe incliné, puis inclinez la quantité opposée sur un conteneur interne pour que le texte soit rectiligne. Voir ce violon par exemple;

http://jsfiddle.net/UZ6HL/4/

D'après ce que vous avez dit, je crois que c'est ce que vous voulez. Sinon, veuillez préciser quand l'élément doit afficher l'arrière-plan.

5
Don
.skew {
  background: green;
  color: #fff;
  padding: 50px;
  transform: skewX(-7deg);
  font-size: 20px;
  font-weight: 700;
}

.skew p {
  transform: skewX(7deg);
}
<div class="skew">
  <p>This is caption</p>
</div>

Voici n exemple

1
lurk

Pour que IE supporte simplement, ajoutez -ms-transform: skew(20deg, 0deg);) à côté de tous les autres transform: skew(20deg, 0deg); s.

1
Thabet Jmal