Putting ein Bild-hintergrund auf eine CSS-Dreieck

Ich versuche ein Hintergrundbild für einen div mit CSS Ränder, erstellen ein Dreieck. Dies ist meine aktuelle Bemühungen so weit. Es funktioniert gut mit Uni-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, ein Blick auf die JS-Fiddle, wie würde ich es machen, dass gray Abschnitt auch ein Bild hintergrund meiner Wahl, anstatt verwenden Sie Farben wie #111, #eee, etc..

Versuchen; aber wenn Sie bereits mit Bild, warum machen Sie nicht Dreieck-Bilder und transparente divs und setzen Sie Sie an der Ecke?
Denn es ist auf eine ansprechende Gestaltung. die Breite der Dreiecke ist abhängig von der Größe auf dem Bildschirm. Trotz, dass Ihre Idee noch Verdienst - ich könnte Sie ungewöhnlich lange, so dass Sie in Ordnung sein würde, auf alle Bildschirmgrößen. Danke für die Anregung.
stackoverflow.com/questions/23758922/transparent-arrow-triangle

InformationsquelleAutor user2380171 | 2013-05-14

  1. 10

    Einem Dreieck in CSS ein hack, erzeugt durch die Anzeige von teilen der border eines Elements. Also, das Dreieck, das Sie sehen, ist nicht ein element, sondern ein CSS-Grenze.

    Die Grenze kann nicht gestylt werden-mit den üblichen CSS - background-image Stil, und das ist, wo Sie sehen, beginnen die Grenzen von CSS Dreiecken, und warum es wirklich ein hack ist eher als eine gute Technik.

    Gibt es eine CSS-Lösung, die möglicherweise für Sie arbeiten: border-image.

    border-image ist ein CSS-Stil, der das tut, was Sie erwarten würde; es setzt ein Bild in den Rand eines Elements ein. Da die CSS-Dreieck ist eine Grenze, Sie könnte es verwenden, um ein Hintergrundbild auf Ihrem Dreieck.

    Jedoch, die Dinge kompliziert. Die border-image Stil ist entworfen, um Stil-Grenzen, nicht Dreiecke; es hat Eigenschaften für das styling Ecken und Seiten, und Dehnung Bilder entsprechend. Ich habe nicht versucht es mit einem Dreieck, aber ich kann Vorhersagen, dass es einige Macken, die machen es schwierig zu bedienen. Aber fühlen Sie sich frei, es zu gehen.

    Das andere problem mit border-image ist browser-Unterstützung. Es ist ein relativ neuer CSS-Stil, und ist völlig ungestützt in vielen aktuellen Browsern, inklusive aller IE-Versionen. Sie können sehen, die volle browser-Unterstützung Tabelle, für die es an CanIUse.

    Wegen all dieser Probleme, ich würde vorschlagen, dass, wenn Sie wollen, um Formen zu zeichnen im browser, Sie sollten wirklich fallenlassen CSS-hacks, und mit SVG oder Canvas. Diese werden gut unterstützt in den meisten Browsern, und natürlich unterstützen alle Zeichenwerkzeuge, die Sie sich nur wünschen konnte.

    CSS-Dreiecke sind ideal für die gelegentliche Pfeil-Form, aber für alles, was komplexer als das, es ist viel einfacher, um die ordnungsgemäße Verwendung von Grafiken, anstatt zu versuchen, um die Haufen mehr und mehr hacks in Ihren CSS-code.

    nette Antwort, +1
    Einstellung als akzeptierte Antwort, sehr prägnant. Vielen Dank für die Informationen, obwohl der Weg, den ich ging, wurde schließlich zu verwenden .PNG mit Transparenz zu emulieren den Effekt.
    stackoverflow.com/questions/23758922/transparent-arrow-triangle

    InformationsquelleAutor Spudley

  2. -5

    Geben, um ein div ein Hintergrundbild müssen Sie die css-Regel

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

    Damit Ihre Klasse .Dreieck würde dann so Aussehen

    .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 hintergrund-Bild sollte man die hintergrund-wiederholen.
    repeat-x wird das Bild wiederholt sich auf der linken und rechten Seite (x-Achse), während die repeat-y wiederholt Ihr Bild hoch und runter (y-Achse). Wenn Sie nicht möchten, wiederholen Sie das Bild nur verwenden, no-repeat, aber ich würde empfehlen, mit einer festen Höhe und Breite dann.

    InformationsquelleAutor RynoZ

Schreibe einen Kommentar