Wie man ein Element verzerrt, aber den Text normal hält (ungezähmt)

73

Ist es möglich, dieses Bild nur mit CSS zu reproduzieren?

Geben Sie hier die Bildbeschreibung ein

Ich möchte dies auf mein Menü anwenden, damit der braune Hintergrund auf der hoverInstanz angezeigt wird

Ich weiß nicht, wie ich das machen soll, ich habe nur;

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

Antworten:

134

skewEin übergeordnetes Element ( LI) und ein umgekehrter Versatz der untergeordneten Elemente

CSS-Menü verzerrte Schaltflächen diagonale Ränder

nav ul {
  padding: 0;
  display: flex;
  list-style: none;
}
nav li {
  transition: background 0.3s;
  transform: skew(20deg); /* SKEW */
}

nav li a {
  display: block; /* block or inline-block is needed */
  text-decoration: none;
  padding: 5px 10px;
  font: 30px/1 sans-serif;
  transform: skew(-20deg); /* UNSKEW */
  color: inherit;
}

nav li.active,
nav li:hover {
  background: #000;
  color: #fff;
}
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
Erweitern Sie das Snippet

Roko C. Buljan
quelle
Ja ... und danke auch, um meine Frage neu zu formulieren. Ich erinnere mich nicht an diesen skewNamen. :)
Preston
dies: display:inline-block;funktioniert nicht IE8 oder weniger ... also habe ich einen *float:left;Hack gemacht, um dies "inline" auf IE zu machen. Aber wenn ich mit der Maus über das Menü fahre (auf IE8), kann ich keinen normalen Hintergrund einrichten (ohne den Versatz). Irgendwelche Tipps?
Preston
@ Preston sicher, verwenden Sie Bilder und helfen Sie uns, IE8 zu töten
Roko C. Buljan
Das funktioniert nur, wenn Sie ein Element verschachtelt haben. Ich möchte nur den Text beeinflussen.
JackHasaKeyboard
1
@ JackHasaKeyboard können Sie nicht; Wickeln Sie also Ihren Text in ein <span>und machen Sie dasselbe.
Roko C. Buljan
10

Hier ist eine Geige für die Verwendung in verschiedenen Browsern - ich habe sie in ein paar Minuten erstellt.

Versuchen Sie, mit den Argumenten zu spielen, die ich verwendet habe, :beforeund :aftertun Sie dies.

https://jsfiddle.net/DTBAE/

udidu
quelle
Gibt es eine Chance, dass du das erklären kannst? Ich bin ein bisschen ratlos für das, was es tut und möchte ein bisschen über :beforeund:after
Don
Ich hätte mich auch für die Transformationsmethode entschieden, aber dies hat eine bessere Browserunterstützung!
Thgaskell
Während dies fast Xbrowser ist (: nach ,: vor), können Sie nur einen Winkel von 45 ° erhalten
Roko C. Buljan
Sie können die Randbreiten anpassen, um die Neigung zu ändern. jsfiddle.net/DTBAE/1
thgaskell
6

Sie können die transform: skew(X, Y)Eigenschaft verwenden, um dies zu erreichen. Erstellen Sie einen verzerrten äußeren Container, und verzerren Sie dann den entgegengesetzten Betrag auf einem inneren Container, um den Text wieder gerade zu machen. Siehe diese Geige zum Beispiel;

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

Nach dem, was Sie gesagt haben, glaube ich, dass dies das ist, was Sie wollen. Wenn nicht, klären Sie bitte, wann der Artikel den Hintergrund anzeigen soll.

Don
quelle
3 

.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>
Erweitern Sie das Snippet

Hier ist ein Beispiel

lauern
quelle
2

Um IE-Unterstützung zu erhalten, fügen Sie einfach -ms-transform: skew(20deg, 0deg);neben allen anderen transform: skew(20deg, 0deg);s hinzu.

Thabet Jmal
quelle