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

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