Setzen eines Bildhintergrunds auf ein CSS-Dreieck

Question

Ich versuche, ein Hintergrundbild auf ein div zu setzen, das CSS-Rahmen verwendet, um ein Dreieck zu erstellen. Das sind meine derzeitigen Bemühungen. Es funktioniert gut mit festen Farben, aber ich bin ratlos, wenn es um Bilder geht.

HTML

<div class="wrapper"> 
    <div class="left triangle"></div> 
    <div class="right triangle"></div> 
</div> 

CSS

.wrapper { 
    padding:50px 0px; 
    height: 50px; 
    position: relative; 
    width: 300px; 
    background: url("http://4.bp.blogspot.com/-dq50t26bK1o/TruhUtyIBWI/AAAAAAAANEw/kKnBQ1lSGik/s1600/bokeh_texture04.jpg"); 
} 

.triangle { 
    border-bottom: 50px solid #eee; 
    width: 50px; 
    position: absolute; 
    bottom: 0; 
} 

.right { 
    right: 0; 
    border-left: 100px solid transparent; 
} 

.left { 
    left: 0; 
    border-right: 100px solid transparent; 
} 

jsfiddle: http://jsfiddle.net/aRS5g/9/

so an, dass sucht JS Fiddle, wie würde ich den grauen Abschnitt mache auch ein Bild Hintergrund meiner Wahl, anstatt Farben wie # 111, #eee usw. zu verwenden.

Answer 1

Ein Dreieck in CSS ist ein Hack, der durch das Anzeigen von Teilen der Umrandung eines Elements erzeugt wird. Daher ist das Dreieck, das Sie sehen, kein Element selbst, sondern ein CSS-Rahmen.

Der Rahmen kann nicht mit dem normalen CSS-Stil background-image Stil gestylt werden, und hier sehen Sie die Grenzen der CSS-Dreiecke, und warum es wirklich ein Hack ist, anstatt eine gute Technik.

Es gibt eine CSS-Lösung, die für Sie arbeiten kann: border-image.

border-image ist ein CSS-Stil, der das tut, was Sie erwarten würden; Es fügt ein Bild in die Grenze eines Elements ein. Da das CSS-Dreieck ein Rahmen ist, können Sie damit ein Hintergrundbild auf Ihr Dreieck legen.

Die Dinge werden jedoch kompliziert. Der Stil border-image ist entworfen, um Grenzen zu gestalten, nicht Dreiecke; Es verfügt über Funktionen zum Stylen von Ecken und Seiten sowie zum richtigen Strecken von Bildern. Ich habe es nicht mit einem Dreieck versucht, aber ich kann vorhersagen, dass es einige Macken haben könnte, die es schwierig machen, es zu benutzen. Aber zögern Sie nicht, es auszuprobieren.

Das andere Problem mit border-image ist Browser-Unterstützung. Es ist ein relativ neuer CSS-Stil und wird in vielen aktuellen Browsern, einschließlich aller IE-Versionen, vollständig nicht unterstützt. Sie können die vollständige Browser-Unterstützungstabelle dafür unter CanIUse sehen.

Aufgrund all dieser Probleme, würde ich vorschlagen, dass, wenn Sie Formen im Browser zeichnen möchten, sollten Sie wirklich überlegen, CSS-Hacks und SVG oder Canvas verwenden. Diese werden in den meisten Browsern gut unterstützt und unterstützen offensichtlich alle Zeichenfunktionen, die Sie möglicherweise benötigen.

CSS-Dreiecke eignen sich hervorragend für die gelegentliche Pfeilform, aber für etwas Komplexeres ist es viel einfacher, richtige Grafiken zu verwenden, anstatt mehr und mehr Hacks in Ihren CSS-Code zu stapeln.

Answer 2

zu geben ein div ein Hintergrundbild müssen Sie die CSS-Regel

background-image:url("your image url here"); 

So Ihre Klasse hinzufügen .triangle wie diese

.triangle { 
background-image:url("your url here"); 
background-repeat:no-repeat; 
border-bottom: 50px solid #eee; 
width: 50px; 
position: absolute; 
bottom: 0; 
} 

auch abhängig von Ihrem Hintergrundbild aussehen würden Sie die Hintergrund-Wiederholung setzen soll. repeat-x bewirkt, dass das Bild nach links und rechts (x-Achse) wiederholt wird, während repeat-y das Bild nach oben und unten (y-Achse) wiederholt. Wenn Sie das Bild nicht wiederholen möchten, verwenden Sie einfach die Option "Keine Wiederholung", aber ich würde dann eine feste Höhe und Breite empfehlen.