CSS-Parallelogramm- und Rautentransformation-CSS-Tutorial-php.cn

CSS-Parallelogramm- und Rautentransformation

高洛峰

Freigeben： 2016-11-30 16:01:24

Original

2139 Leute haben es durchsucht

*Die folgenden Techniken sind alle von „CSS Secrets“ von Lea Verou abgeleitet

Parallelogramm

Die Konstruktion eines Parallelogramms kann diagonal basierend auf dem Rechteck durch das Verformungsattribut der Schräge gezeichnet werden () Heben Sie an, um zu erhalten (das von Skew verwendete Koordinatensystem, die vertikale Achse ist die X-Achse und die horizontale Richtung ist die Y-Achse, die dem gemeinsamen Koordinatensystem entgegengesetzt ist).

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .location{
            position: relative;
            top: 150px;
            left: 150px;
        }
         .button{
             color: white;
             background-color: #51bfff;
             width: 120px;
             height: 50px;
             line-height: 50px;
             text-align: center;
             transform: skewX(-45deg);
         }
    </style>
</head>
<body>
    <div class="location button">click</div>
</body>
</html>

Nach dem Login kopieren

CSS-Parallelogramm- und Rautentransformation

Aber die Inhaltsneigung ist möglicherweise nicht der Effekt, den wir brauchen. Eine übliche Lösung besteht darin, ein Div in der inneren Ebene zu verschachteln und dann einen Pull in umgekehrter Richtung hinzuzufügen -up transform: skewX(45deg); aber Leute mit Code-Hysterie sagten, sie könnten es nicht akzeptieren.

Eine andere Idee besteht darin, alle Stile auf Pseudoelemente anzuwenden. Dann transformieren Sie das Pseudoelement.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .location{
            position: relative;
            top: 150px;
            left: 150px;
        }
         .button{
             width: 120px;
             height: 50px;
             line-height: 50px;
             text-align: center;
             color: white;
         }
        .button:before{
            content: &#39;&#39;;
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            background-color: #51bfff;
            transform: skewX(-45deg);
            z-index: -1;
        }
    </style>
</head>
<body>
    <div class="location button">click</div>
</body>
</html>

Nach dem Login kopieren

CSS-Parallelogramm- und Rautentransformation

Dies löst nicht nur das Problem verzerrter Inhalte, sondern die HTML-Struktur ist immer noch so sauber wie zuvor. Bitte beachten Sie jedoch, dass das vom Pseudoelement generierte Muster den Inhalt überlappt. Sobald ein Hintergrund festgelegt ist, deckt dieser den Inhalt ab, sodass z-index: -1 hinzugefügt werden muss.

Rautenbild

Wenn es auf einem Quadrat basiert, ist die Raute ein um 45 Grad gedrehtes quadratisches Muster. Wir können uns leicht vorstellen, das äußere Div um 45 Grad zu drehen und dann das innere Bild um 45 Grad in die entgegengesetzte Richtung zu drehen. Das folgende Muster wird erhalten.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .location{
            position: relative;
            top: 150px;
            left: 150px;
        }
         .picture{
             width: 600px;
             transform: rotate(45deg);
             overflow: hidden;
         }
        .picture>img{
            max-width: 100%;
            transform: rotate(-45deg);
        }
    </style>
</head>
<body>
    <div class="location picture"><img  src="1.jpeg" alt="CSS-Parallelogramm- und Rautentransformation" ></div>
</body>
</html>

Nach dem Login kopieren

CSS-Parallelogramm- und Rautentransformation

Es ist ein ziemlich normales Achteck. Wenn Sie den Produktmanager überzeugen können, ist die Arbeit erledigt. Nun, ich schätze, Sie können nicht überzeugt werden. . .

Da die Rotationsrichtungen hier inkonsistent sind, fängt das äußere Div den überschüssigen Teil ab (Hinweis: Überlauf: versteckt), und dann ist ein Teil davon wieder leer. Solange der leere Teil ausgefüllt ist, wird es eine Raute sein. Hier können Sie eine Skizze zeichnen und den Satz des Pythagoras zur Berechnung verwenden.

Das berechnete Ergebnis ist, dass es 1,42-fach vergrößert und vollständig gefüllt ist. Wir haben das Transformationsattribut von img in transform: rotation(45deg) scale(1.42) geändert und erhalten das folgende Bild:

CSS-Parallelogramm- und Rautentransformation

Dieses Schema zum Konstruieren eines Diamanten hat einen Fehler Das heißt, wenn das Originalbild nicht quadratisch ist, müssen Sie einen größeren Vergrößerungsfaktor verwenden, und der aufgenommene Bildinhalt wird eingeschränkter.

Und der Plan selbst ist nicht einfach und elegant. Hier stellen wir Ihnen eine Clip-Pfad-Eigenschaft vor (leider scheint die Unterstützung nicht gut zu sein), mit der Sie das Bild durch Übergeben eines festen Positionspunkts in jedes Polygon schneiden können.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .location{
            position: relative;
            top: 150px;
            left: 150px;
        }
        .picture{
            -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
            -moz-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
            clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
            transition: 1s clip-path;
        }

    </style>
</head>
<body>
<img  class="location picture" src="1.jpeg" alt="CSS-Parallelogramm- und Rautentransformation" >
</body>
</html>

Nach dem Login kopieren

CSS-Parallelogramm- und Rautentransformation