Beispielcode zur Implementierung des Div-Konkaveckenstils mit CSS

Bei der normalen Entwicklung verwenden wir normalerweise konvexe, abgerundete Ecken, also das Border-Radius-Attribut. Wenn eine konkave Ecke vorhanden ist, ziehen wir grundsätzlich zwei Implementierungsmethoden in Betracht. Eine Möglichkeit besteht darin, das Hintergrundbild direkt zu verwenden, die andere darin, CSS zu verwenden.

Die verwendeten Eigenschaften sind „Hintergrund“ oder „Hintergrundbild“ kombiniert mit „radialem Farbverlauf“. Beispiel:

Hintergrundbild: radialer Farbverlauf (200px bei 50px 0px, #fff 50px, #4169E1 50px);

Beim radialen Farbverlauf müssen hauptsächlich drei Parameter gesteuert werden.

Zum einen sind es der Ursprung und die Größe. Die Größe ist ähnlich wie der Rahmenradius. Der Ursprung wird durch at dargestellt, das die Koordinaten des Punkts angeben kann, oder durch left, right, top und bottom.

Als nächstes kommen zwei Farben und Transparenz, Größe usw. Hier 50px oder Prozentsatz, ich habe das erste getestet, nur 50 ist halb gerundet, während die zweiten 50px wenig Wirkung zu haben scheinen.

Beispiel:

Um den im Bild gezeigten hellgrünen konkaven Eckenstil zu erreichen, gibt es kein Materialbild.

Start: Legen Sie zunächst die Breite und Höhe dieses Div fest und legen Sie die relative Positionierung fest. Platzieren Sie dann 4 absolut positionierte Elemente darin, stellen Sie ihre Breite und Höhe gleich der Größe der Konkavität ein und positionieren Sie sie dann absolut, um sie an den 4 Ecken zu befestigen. Verwenden Sie dann den oben genannten konkaven Stil.

Es ist zu beachten, dass die oberen beiden Ecken sehr einfach auszufüllen sind, die unteren beiden Ecken jedoch, nachdem nur die Position und die konkave Position festgelegt wurden, wie folgt aussehen:

Hierzu ist eine weitere Drehung erforderlich.

Der vollständige Code lautet wie folgt:

CSS:

.notice_box_cls #gemeinsameNotice {
    Hintergrundfarbe: #E8F7F2;
    Polsterung: 20px 10px;
}
.notice_box_cls .notice_body0 {
    Position: relativ;
}
.Benachrichtigungsbox_cls .Benachrichtigungskörper {
    Hintergrund: radialer Farbverlauf (15px oben links, #fff 50px, #E8F7F2 50 %);
    Position: absolut;
    links: 0;
    oben: 0;
    Breite: 15px;
    Höhe: 15px;
}
.notice_box_cls .notice_body1 {
    Hintergrund: radialer Farbverlauf (15px oben rechts, #fff 50px, #E8F7F2 50 %);
    Position: absolut;
    rechts: 0;
    oben: 0;
    Breite: 15px;
    Höhe: 15px;
}
.notice_box_cls .notice_body2 {
    Hintergrund: radialer Farbverlauf (15px unten rechts, #fff 50px, #E8F7F2 50 %);
    Position: absolut;
    links: 0;
    unten: 0;
    Breite: 15px;
    Höhe: 15px;
    transformieren: drehen (90 Grad);
}
.notice_box_cls .notice_body3 {
    Hintergrund: radialer Farbverlauf (15px unten links, #fff 50px, #E8F7F2 50 %);
    Position: absolut;
    rechts: 0;
    unten: 0;
    Breite: 15px;
    Höhe: 15px;
    transformieren: drehen (270 Grad);
}

html:

<div Klasse="Hinweis">
                                    <div Klasse="">
                                        <div Klasse="Hinweis_Titel">
                                            <span>Hinweise und Ankündigungen</span>
                                        </div>
                                        <div Klasse="Hinweis_Körper0">
                                            <ul id="gemeinsameNotice">
                                                <!-- <li><a href="#" class="fl">Bildungsinformatik in der Provinz Hubei, S1</a><i class="fr">13.05.2017</i></li>
                                            <li><a href="#" class="fl">Bildungsinformatik in der Provinz Hubei, S2</a><i class="fr">13.05.2017</i></li>
                                            <li><a href="#" class="fl">Bildungsinformatik der Provinz Hubei S3</a><i class="fr">13.05.2017</i></li>
                                            <li><a href="#" class="fl">Bildungsinformatik in der Provinz Hubei, S4</a><i class="fr">13.05.2017</i></li>
                                            <li><a href="#" class="fl">Bildungsinformatik in der Provinz Hubei, S5</a><i class="fr">13.05.2017</i></li>
                                            <li><a href="#" class="fl">Bildungsinformatik in der Provinz Hubei, S6</a><i class="fr">13.05.2017</i></li> -->
                                            </ul>
                                            <div Klasse="Benachrichtigungstext">
                                            </div>
                                            <div Klasse="Hinweis_Körper1">
                                            </div>
                                            <div Klasse="Hinweis_Körper2">
                                            </div>
                                            <div Klasse="Hinweis_Körper3">
                                            </div>
                                        </div>
                                    </div>
                                  </div>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: Mehrere Möglichkeiten, die Lesbarkeit von Webseiten zu verbessern

>>: Detaillierter Prozess der Vue-Front-End-Verpackung

So installieren Sie MySql in CentOS 8 und erlauben Remoteverbindungen

Artikel

So erstellen Sie eine PHP+Nginx+Swoole+MySQL+Redis-Umgebung mit Docker

Artikel

Detaillierte Erklärung des verschiebbaren und bearbeitbaren Gantt-Diagramms (Highcharts können für Vue und React verwendet werden)

Artikel

JavaScript implementiert die Drag-Slider-Puzzle-Verifizierungsfunktion (html5, Canvas)

Beispielcode zur Implementierung des Div-Konkaveckenstils mit CSS

So installieren Sie MySql in CentOS 8 und erlauben Remoteverbindungen

So erstellen Sie eine PHP+Nginx+Swoole+MySQL+Redis-Umgebung mit Docker

Detaillierte Erklärung des verschiebbaren und bearbeitbaren Gantt-Diagramms (Highcharts können für Vue und React verwendet werden)

JavaScript implementiert die Drag-Slider-Puzzle-Verifizierungsfunktion (html5, Canvas)

Was sind die Unterschiede zwischen xHTML- und HTML-Tags?

MySQL 8.0.25 Installations- und Konfigurations-Tutorial unter Linux

Vue implementiert Klicks und übergibt gleichzeitig Ereignisobjekte und benutzerdefinierte Parameter.

Geschickte Nutzung von WebKit-Box-Reflect zur Erzielung verschiedener dynamischer Effekte (Zusammenfassung)

Vue3 setup() - Erweiterte Verwendungsbeispiele - ausführliche Erklärung

JavaScript zum Implementieren einer zeitlich begrenzten Flash-Sale-Funktion

Artikel empfehlen

Node.js löst das Problem verstümmelter chinesischer Zeichen in Clientanforderungsdaten

Lösung für das Problem, dass Docker Containerdienste nicht stoppen oder löschen kann

Warum wird UTF-8 in MySQL nicht empfohlen?

Details zum Like-Operator in MySQL

Lösung für das Problem, dass der Hostname des Hosts im Docker-Container nicht abgerufen werden kann

Einführung in general_log-Protokollwissenspunkte in MySQL

Vue+Swiper realisiert Timeline-Effekt

Zusammenfassung einiger gängiger Methoden des JavaScript-Arrays

CentOS7-Konfiguration Alibaba Cloud Yum-Quellmethodencode

Gestaltung von Popup-Fenstern und schwebenden Ebenen im Webdesign

Erläutern Sie die Bereitstellung und Konfiguration des Clickhouse Docker-Clusters anhand von Beispielen.

JS implementiert die Append-Funktion von jQuery

Native JS-Implementierung der Slider-Intervallkomponente

Tutorial zum Kompilieren und Installieren von MySQL 5.7.17 aus dem Quellcode auf dem Mac

Fähigkeiten zur Erstellung von Webformularen