CSS: Neigen Sie ein Schaltflächen-Grenze, nicht den text

Ich bin auf der Suche nach eine einfache Möglichkeit mit einen einzigen tag (nur <a>)zum erstellen einer skew-Effekt an der Grenze, aber halten Sie den text so, wie es ist.

Ich würde wissen, wie man mit einer span - oder außen, aber ich will nicht mehr, so ziemlich null Sinn HTML auf der Seite.

Beispiel unten.

InformationsquelleAutor Sander Schaeffer | 2015-06-10

4

Können Sie unskew das untergeordnete element, d.h. einen der gegenüber skew-Koordinaten, wie von Ihnen angegeben, für die Eltern.

Hier ist ein Beispiel

Angenommen, Sie haben unten, wie Sie html,
```
<div class="btn">
    <button><div class="btn-text">Click</div></button>
</div>
```
Wenn wir verfälschen das übergeordnete element von 20deg dann sollten wir zerren das Kind-element von -20deg als,
```
.btn {
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
}
.btn-text {
    -ms-transform: skewX(-20deg); /* IE 9 */
    -webkit-transform: skewX(-20deg); /* Safari */
    transform: skewX(-20deg);
    padding: 20px;
}
```
- ich mag diese Antwort auch zwei gute Antworten auf das gleiche problem, obwohl ich wahrscheinlich würde gehen für die css-Dreiecke, da Sie weniger HTML 😛
- Nur eine Vermutung, aber wäre es nicht einfacher, das html-wie <a href="#"><span>text</span></a>? Auf diese Weise müssen Sie nicht zwei separate HTML-Klassen/Elemente (span, ist keine). Die CSS kann die gleiche bleiben, jedoch. Außerdem: die Verwendung von Klassen, nicht ID. 🙂 Vielen Dank für deinen input tho!
- Mit ein bisschen Hilfe von CSS habe ich die span-Methode, wie ich oben vorgeschlagen. Ich hatte Sie 'display: inline-block" für beide Anker-und das span-element, wie Sie nicht sind inline-Elemente. Aber es funktioniert Super jetzt! 🙂
- Klassen sind wahrscheinlich am besten, dann kann man wieder, dass der Stil auf andere Elemente und es nicht zu einem problem führen, wenn Sie sich entscheiden, ändern Sie die internen element aus irgendeinem Grund, D. H. <a class='skew-outer'><span class='skew-inner' ...
- Tony Leigh, ja, Klassen sind viel besser, wenn Sie Sie wiederverwenden möchten Sachen, ich habe eine schlechte Angewohnheit, für Sie nicht manchmal denken, Klasse wiederverwenden. Aktualisiert die Antwort.
InformationsquelleAutor Saumil
4

Können Sie einfach accompish gewünschten Effekt mit CSS Dreieck tricks.
Nur fügen Sie einige Stile für das ::before und :: after-pseudo-Klassen.

CSS:
```
.skewed_button {
    background: #32CD32;
    color: #000;
    text-decoration: none;
    font-size: 20px;
    display: inline-block;
    height: 30px;
    margin-left: 15px;
    padding: 6px 10px 0;
}
.skewed_button::before {
    content: "";
    float: left;
    margin: -6px 0 0 -25px;
    border-left: 15px solid transparent;
    border-bottom: 36px solid #32CD32;  
    height: 0px;
}
.skewed_button::after {
    content: "";
    float: right;
    margin: -6px -25px 0 0 ;
    border-left: 15px solid #32CD32;
    border-bottom: 36px solid transparent;  
    height: 0px;
}
```
HTML:
```
<a href="#some_url" class="skewed_button">Some Text</a>
```
- warum ist eine Grenze weiße und eine transparent? auch, warum gibt es -6px der oberen Rand und eine unterschiedliche Anzahl von linken und rechten Ränder auf jedem Dreieck?
- Es war nur ein Fehler. Ich habe es geändert transparent. Es sind unterschiedliche Ränder für den oberen und den linken/rechten Rand, denn wir brauchen das vertikale ausrichten von text zentrieren, so top-Marge soll Hinzugefügt werden (mit -6px es sieht nett aus). Und -25px Links/rechts: 15px - es ist von der Größe des Dreiecks, und 10px - fügen Sie einfach ein Leerzeichen zwischen text und Dreiecke.
- Ich nehme an, es ist nicht möglich, es wird automatisch gleich der Höhe der Schaltfläche selbst? Wahrscheinlich, alle Tasten haben die gleiche Höhe, wie die Größe der Schrift nicht ändern.. aber trotzdem. Das wäre schön.
- möglicherweise - siehe die ersten js-fiddle in meinem Antwort - versuchen Sie, die Werte in % und sehen was passiert, aber ich bin mir nicht sicher über die breiten auf die Pseudo-Elemente, was wäre Sie zu vergleichen ? Vw-Einheiten könnte aber funktionieren, wenn Sie verwendet wurden, auf die Schaltfläche zu, und Sie dachte gar nicht daran, die Größe ändert sich mit der viewport!
- Es ist ok, aber nicht gut skalieren. Wenn Sie brauchen, um ansprechende Texte usw, dann wirds auch einige Grad der Schmerzen zu erhalten
InformationsquelleAutor Vadym Pechenoha
2

Eine Lösung ist die Verwendung css-Dreiecke auf :before und :after. Diese Lösung verlässt die sauberste HTML.

Dieses jsfiddle zeigt
```
.is-skewed {
    width: 80px;
    height: 40px;
    background-color: #f07;
    display: block;
    color: #fff;
    margin-left: 40px;
}

.is-skewed:before,
.is-skewed:after {
    content: '';
    width: 0;
    height: 0;
}

.is-skewed:before {
    border-bottom: 40px solid #f07;
    border-left: 20px solid transparent;
    float:left;
    margin-left: -20px;
}

.is-skewed:after {
    border-top: 40px solid #f07;
    border-right: 20px solid transparent;
    float:right;
    margin-right: -20px;
}
```
CSS-Dreiecke Dicke Grenzen auf Elemente mit 0 Dimensionen mit Punkten, an denen sich die Grenzen treffen, die Bereitstellung der diagonalen Linie erforderlich, um ein Dreieck (eine gute Visualisierung ist der Blick auf die Ecke eines Bilderrahmens, wo die beiden Ränder treffen und erstellen Sie Dreiecke). Es ist wichtig, dass ein Rand ist transparent und ein farbiger, und dass Sie benachbart sind (d.h. Links und oben, nicht nach Links und rechts). Sie können passen Sie die Größe, die Ausrichtung und die Längen der Seiten durch das spielen mit der Grenze Größen.

Für Ihre Schaltfläche, verwenden wir auch floats und negativen Margen ziehen Sie außerhalb des Elements und richten Sie Sie richtig. Position absolute und negative Links und rechts wäre auch eine gute Lösung, um die Positionierung

Können Sie auch tun, :hover Staaten
```
.is-skewed:hover {
    background-color: #40f;
}
.is-skewed:hover:after {
    border-top-color: #40f;    
}
.is-skewed:hover:before {
    border-bottom-color: #40f;
}
```
Es ist wichtig zu beachten, dass die Verwendung von background-color und border-color und auch, dass die :hover kommt zuerst in allen relevanten Selektoren. Wenn der hover-kam das zweite dies würde geschehen,

InformationsquelleAutor Toni Leigh

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.