Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

DDD
Freigeben: 2024-11-10 17:12:02
Original
301 Leute haben es durchsucht

How to Create CSS3 Triangle Shapes with Background Images and Ensure Clickability?

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>
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage