Können CSS3-Dreiecke mit Hintergrundbildern anklickbare transparente Bereiche verarbeiten?

Dreiecksformen mit Hintergrundbildern erstellen

Frage:

Entwerfen einer Website mit zwei Dreiecken Elemente, die Hintergrundbilder enthalten und als anklickbare Links dienen, werden zu einer Herausforderung, wenn versucht wird, den transparenten Teil eines Dreiecks für Klicks zugänglich zu machen. Kann dieses Design mithilfe von CSS3-Dreiecken mit Hintergrundbildern erreicht werden?

Antwort:

Verwendung untergeordneter Bilder:

Zur Vereinfachung Um den Prozess zu vereinfachen und die Kompatibilität mit den meisten Browsern aufrechtzuerhalten, besteht eine Lösung darin, untergeordnete Bilder für die Links anstelle von Hintergrundbildern zu verwenden. Bei dieser Methode wird die Dreiecksform mithilfe der Eigenschaft „Transformationsschräge“ erstellt und die untergeordneten Bilder versetzt, um die Schräge auszugleichen.

Schritte:

• Erstellen Sie ein Container-Div mit den entsprechenden Abmessungen (z. B. 900 Pixel Breite, 600 Pixel Höhe).
• Fügen Sie zwei untergeordnete Elemente hinzu Divs für die Dreiecke und positionieren Sie sie absolut mit Transformationsursprüngen an gegenüberliegenden Ecken.
• Neigen Sie jedes Dreieck um einen bestimmten Winkel, der auf der Grundlage der Höhe und Breite des Dreiecks berechnet wird (in diesem Beispiel -55,98 Grad).
• Erstellen Sie untergeordnete Bilder innerhalb jedes Dreiecks und drehen Sie sie um denselben Winkel wie ihre übergeordneten Divs.
• Setzen Sie die Überlaufeigenschaft für beide auf ausgeblendet Container und die Dreiecksdivs.

HTML:

<div>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">.container {
  overflow: hidden;
  width: 900px;
  height: 600px;
}

.triangle, .triangle img {
  width: 100%;
  height: 100%;
}

.triangle {
  overflow: hidden;
  position: absolute;
  transform: skewX(-55.98deg);
}

.triangle:first-child {
  left: -.25em;
  transform-origin: 100% 0;
}

.triangle:last-child {
  right: -.25em;
  transform-origin: 0 100%;
}

.triangle img {
  transform: skewX(55.98deg);
  transform-origin: inherit;
}