Wie erstelle ich mit CSS3 Dreiecksformen mit Hintergrundbildern?

Dreiecksform mit Hintergrundbild: Ein CSS3-Ansatz

Ihr Ziel, zwei Dreiecke mit Hintergrundbildern zu erstellen, die als Links fungieren, ist mit CSS3 erreichbar Dreiecke. Während Sie ursprünglich angenommen haben, dass für benutzerdefinierte Formen Rahmen mit Rahmenfarben erforderlich sind, ist ein anderer Ansatz möglich.

Lösung mit untergeordneten Bildern

Anstatt sich auf Hintergrundbilder zu verlassen, sollten Sie die Verwendung von untergeordneten Bildern in Betracht ziehen Bilder für die Dreiecke. Bei dieser Technik werden die .option-Elemente mit unterschiedlichen Transformationsursprüngen verzerrt. Um eine sichtbare Verzerrung im Endergebnis zu verhindern, entfernen Sie die Verzerrung der untergeordneten Bilder und wenden Sie overflow:hiden sowohl auf die Elemente .pageOption als auch .option an. Dieser Ansatz bietet eine umfassende Browserkompatibilität, mit Ausnahme von IE8/7 und Opera Mini.

HTML-Struktur

<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>

Relevantes CSS

.pageOption {
  overflow: hidden;
  position: relative;
  width: 40em;
  height: 27em;
}
.option, .option img {
  width: 100%;
  height: 100%;
}
.option {
  overflow: hidden;
  position: absolute;
  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 CSS-Konfiguration verzerrt effektiv die Dreiecke, während ihre untergeordneten Bilder entzerrt werden, was zu der gewünschten Dreiecksform mit Hoverfähigkeit führt auf den transparenten Bereichen. Dreieckspositionen und Transformationsursprünge können angepasst werden, um unterschiedliche Dreiecksgrößen und -ausrichtungen zu erreichen.

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