CSS-Parallelogramm- und Rautentransformation
*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>
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: '';
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>
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="/static/imghw/default1.png" data-src="1.jpeg" class="lazy" alt="CSS-Parallelogramm- und Rautentransformation" ></div>
</body>
</html>
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:
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 lazy" src="/static/imghw/default1.png" data-src="1.jpeg" alt="CSS-Parallelogramm- und Rautentransformation" >
</body>
</html>
Wir hoffen, dass das Clip-Pfad-Attribut in naher Zukunft von verschiedenen Browsern besser unterstützt wird.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1376
52
So verwenden Sie die Bootstrap -Taste
Apr 07, 2025 pm 03:09 PM
Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen
So fügen Sie Bilder auf Bootstrap ein
Apr 07, 2025 pm 03:30 PM
Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.
So richten Sie das Framework für Bootstrap ein
Apr 07, 2025 pm 03:27 PM
Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.
So ändern Sie Bootstrap
Apr 07, 2025 pm 03:18 PM
Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.
So sehen Sie das Datum der Bootstrap
Apr 07, 2025 pm 03:03 PM
ANTWORT: Sie können die Datumsauswahlkomponente von Bootstrap verwenden, um Daten auf der Seite anzuzeigen. Schritte: Stellen Sie das Bootstrap -Framework ein. Erstellen Sie ein Eingangsfeld für Datumsauswahl in HTML. Bootstrap fügt dem Selektor automatisch Stile hinzu. Verwenden Sie JavaScript, um das ausgewählte Datum zu erhalten.
So überprüfen Sie das Bootstrap -Datum
Apr 07, 2025 pm 03:06 PM
Befolgen Sie die folgenden Schritte, um Daten in Bootstrap zu überprüfen: Führen Sie die erforderlichen Skripte und Stile ein. Initialisieren Sie die Datumsauswahlkomponente; Legen Sie das Data-BV-Datatattribut fest, um die Überprüfung zu ermöglichen. Konfigurieren von Überprüfungsregeln (z. B. Datumsformate, Fehlermeldungen usw.); Integrieren Sie das Bootstrap -Verifizierungs -Framework und überprüfen Sie automatisch die Datumseingabe, wenn das Formular eingereicht wird.
So laden Sie Dateien auf Bootstrap hoch
Apr 07, 2025 pm 01:09 PM
Die Datei -Upload -Funktion kann über Bootstrap implementiert werden. Die Schritte sind wie folgt: Startstrap CSS und JavaScript -Dateien einführen; Dateieingabefelder erstellen; Datei -Upload -Schaltflächen erstellen; Behandeln Sie Datei -Uploads (verwenden Sie FormData, um Daten zu sammeln und dann an den Server zu senden). benutzerdefinierter Stil (optional).
So setzen Sie die Bootstrap -Navigationsleiste
Apr 07, 2025 pm 01:51 PM
Bootstrap bietet eine einfache Anleitung zum Einrichten von Navigationsleisten: Einführung der Bootstrap -Bibliothek zum Erstellen von Navigationsleistencontainern Fügen Sie Markenidentität hinzu. Erstellen Sie Navigationslinks. Hinzufügen anderer Elemente (optional) Anpassungsstile (optional).
