Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie erstelle ich mit CSS3 Dreiecksformen mit Hintergrundbildern?

Barbara Streisand
Freigeben: 2024-11-11 00:39:02
Original
898 Leute haben es durchsucht

How to Create Triangle Shapes with Background Images Using CSS3?

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

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

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!

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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage