Heim > Artikel > Web-Frontend > CSS-Parallelogramm- und Rautentransformation

CSS-Parallelogramm- und Rautentransformation

高洛峰Original: 2016-11-30 16:01:242207Durchsuche

*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>

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>

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>

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>

CSS-Parallelogramm- und Rautentransformation

Wir hoffen, dass das Clip-Pfad-Attribut in naher Zukunft von verschiedenen Browsern besser unterstützt wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Tutorial zur Flex-Layout-SyntaxNächster Artikel：Tutorial zur Flex-Layout-Syntax

In Verbindung stehende Artikel

Mehr sehen