Kann CSS abgewinkelte Ecken erstellen und Bilder ausschneiden und gleichzeitig einen sichtbaren Rand beibehalten?

CSS-Erstellung abgewinkelter Ecken und Bildausschnitt

Kann CSS genutzt werden, um eine bestimmte Form zu erstellen, die eine um 45 Grad abgewinkelte Ecke mit sich bringt? Darüber hinaus umfasst die Anforderung das Ausschneiden eines Bildes innerhalb der Form, vergleichbar mit der Verwendung einer Maske, bei der der graue Rand sichtbar bleibt.

Wenn man die Machbarkeit dieser Aufgabe ausschließlich innerhalb von CSS untersucht, wird deutlich, dass die Beibehaltung des Randes Herausforderungen mit sich bringt. Dennoch wurde eine Lösung entwickelt, die die Pseudoelemente :before und :after in Verbindung mit einem übergeordneten Container nutzt. Da :before und :after nicht direkt auf ein IMG-Tag angewendet werden können, wird folgender Ansatz gewählt:

1. Erstellen Sie einen Rahmen für das Containerelement.
2. Erstellen Sie ein :before-Element für Verdecken Sie eine Ecke und versetzen Sie deren Positionierung um -1 Pixel, um den Rand zu verbergen.
3. Fügen Sie ein :after-Element mit einem leichten Versatz von hinzu :before-Element, um die Linie innerhalb des Ausschnitts zu erzeugen.

Während dieser Ansatz dem gewünschten Effekt nahe kommt, tritt ein Problem mit der Dicke der 45-Grad-Winkellinie auf. Hier ist das CSS-Code-Snippet:

.cutCorner {
  position: relative;
  background-color: blue;
  border: 1px solid silver;
  display: inline-block;
}

.cutCorner img {
  display: block;
}

.cutCorner:before {
  position: absolute;
  left: -1px;
  top: -1px;
  content: "";
  border-top: 70px solid silver;
  border-right: 70px solid transparent;
}

.cutCorner:after {
  position: absolute;
  left: -2px;
  top: -2px;
  content: "";
  border-top: 70px solid white;
  border-right: 70px solid transparent;
}

Und hier ist ein HTML-Beispiel:

<div class="cutCorner">
  <img class="" src="https://www.google.co.uk/logos/doodles/2013/william-john-swainsons-224th-birthday-5655612935372800-hp.jpg" />
</div>

Das obige ist der detaillierte Inhalt vonKann CSS abgewinkelte Ecken erstellen und Bilder ausschneiden und gleichzeitig einen sichtbaren Rand beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!