Wie erstelle ich CSS3-Dreiecksformen mit Hintergrundbildern und stelle die Anklickbarkeit sicher?

Dreiecksformen mit Hintergrundbildern

In einem Projekt benötigen Sie zwei Dreiecke, die als Links fungieren und Hintergrundbilder enthalten. Das Problem liegt darin, dass es nicht möglich ist, mit der Maus über den transparenten Teil eines Dreiecks zu fahren, um auf den Link dahinter zuzugreifen. So erreichen Sie dieses Design mit CSS3-Dreiecken und Hintergrundbildern:

CSS3-Dreiecke können nicht nur mit Rändern erstellt werden, die nur rechteckige Formen zulassen. Stattdessen können Sie anstelle von Hintergrundbildern untergeordnete Bilder für die Links verwenden. Hier ist der verbesserte Code:

<div class="pageOption">
  <a href="#" class="option" data-inf="photo">
    <img src="../images/menuPhoto.png">
  </a>
  <a href="#" class="option" data-inf="cinema">
    <img src="../images/menuCinema.png">
  </a>
</div>

Das für die Dreiecksformen verantwortliche CSS:

.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;
}

Diese Lösung nutzt die Skew-Transformationseigenschaft, um CSS3-Dreiecke zu erstellen. Die Bilder innerhalb der Optionen werden dann entzerrt, um den verzerrten Container auszugleichen. Indem Sie den Überlauf sowohl im Container als auch in den Optionen auf „Ausgeblendet“ setzen, bleiben die Bilder innerhalb der Grenzen ihrer jeweiligen Bereiche.

Das obige ist der detaillierte Inhalt vonWie erstelle ich CSS3-Dreiecksformen mit Hintergrundbildern und stelle die Anklickbarkeit sicher?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!