Wie erstelle ich schwebende Dreiecke mit Hintergrundbildern in CSS3?

CSS3-Dreiecke mit Hintergrundbildern für nahtlose dreieckige Links erstellen

Einführung

Verbessern Sie die Ästhetik Ihrer Website mit interaktiven Dreiecken -förmige Links können die optische Attraktivität steigern. Mit CSS3 können Sie diese geometrischen Formen mühelos erstellen und Hintergrundbilder integrieren, um Tiefe und Charme zu verleihen.

Die Herausforderung transparenter Schwebezonen

Es tritt jedoch ein häufiges Problem auf beim Erstellen von Dreiecken: Die Unfähigkeit, den Mauszeiger über die transparenten Teile der Hintergrundbilder zu bewegen. Diese Hürde hindert Besucher daran, auf die zugrunde liegenden Links zuzugreifen.

Die Lösung: Nutzung untergeordneter Bilder

Um diese Herausforderung zu meistern, sollten Sie in Betracht ziehen, untergeordnete Bilder für Ihre Links anstelle von Hintergrundbildern zu verwenden . Durch die Implementierung dieses Ansatzes können Sie die übergeordneten Dreieckselemente unabhängig voneinander neigen und gleichzeitig die Ausrichtung ihrer untergeordneten Bildlinks beibehalten.

Code-Implementierung

Hier ist der Code, der zeigt, wie das geht Implementieren Sie diese Technik:

HTML:

<div>
<p><strong>Relevantes CSS:</strong></p>
<pre class="brush:php;toolbar:false">.pageOption {
  overflow: hidden;
  position: relative;
  width: 40em; height: 27em;
}
.option, .option img { width: 100%; height: 100%; }
.option {
  overflow: hidden;
  position: absolute;  
  /* arctan(27 / 40) = 34.01935deg 
   * need to skew by 90deg - 34.01935deg = 55.98065deg
  */
  transform: skewX(-55.98deg);
}
.option:first-child {
  left: -.25em;
  transform-origin: 100% 0;
}
.option:last-child {
  right: -.25em;
  transform-origin: 0 100%;
}
.option img {
  transform: skewX(55.98deg);
  transform-origin: inherit;
}

Fazit

Indem Sie untergeordnete Bilder für Ihre Links verwenden und sie geschickt an schrägen Dreieckselementen ausrichten, können Sie eine nahtlose Hoverbarkeit über die gesamten Dreiecksformen erreichen. Diese Technik verbessert die Interaktivität und visuelle Attraktivität Ihrer Website und sorgt für ein ansprechenderes Benutzererlebnis.