CSS, um den kleinen scharfen Eckeneffekt von Blasen zu erzielen

Effektbild (die Rahmenfarbe ist zu hell, setzen Sie sie in {}):

{ }

Referenzlink Reiner CSS-Blaseneffekt

Erforderliche Kenntnisse:

Wenn die Breite und Höhe des Div beide 0 sind, besteht der gesamte Rahmen aus vier Dreiecken, einem Dreieck auf jeder Seite. Dies kann verwendet werden, um kleine scharfe Ecken zu erstellen, wie beispielsweise die folgenden:

Stellen Sie die Farbe der drei nicht benötigten Ränder auf die gleiche Farbe wie den Hintergrund ein, damit Sie die gewünschten kleinen spitzen Ecken erhalten, und passen Sie die Position dann mithilfe der Positionierung an.

Mit der obigen Methode lässt sich eine kleine spitze Ecke mit Farbe erzielen, der Effekt besteht jedoch darin, eine kleine goldene Ecke mit einem Rand anzuzeigen. Auf der Grundlage der vorhandenen Ecken werden also zwei kleine scharfe Ecken angezeigt, die dann übereinander gelegt und mithilfe des Z-Index-Attributs angezeigt werden. Da zwei davon benötigt werden, können Pseudoelemente verwendet werden, sodass keine nicht-semantischen Elemente auftreten. Der Code lautet wie folgt:

&::vor {
    Inhalt: "";
    Anzeige: Block;
    Breite: 0;
    Höhe: 0;
    Rand: durchgezogen 10px;
    Rahmenfarbe: #E9E9E9 rgba(255, 255, 255, 0)
          rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
    Position: absolut;
    oben: 208px;
    links: 40px;
    Z-Index: 2;
}

&::nach {
    Inhalt: "";
    Anzeige: Block;
    Breite: 0;
    Höhe: 0;
    Rand: durchgezogene 8px;
    Rahmenfarbe: #fff rgba(255, 255, 255, 0) 
        rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
    Position: absolut;
    oben: 207px;
    links: 41,5px;
    Z-Index: 3;
}

Zusammenfassen

Dies ist das Ende dieses Artikels darüber, wie man mit CSS den Effekt kleiner spitzer Ecken von Blasen erzielt. Weitere relevante Inhalte zu CSS-Blasen mit kleinen spitzen Ecken finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!