Mettre une image en arrière plan sur une feuille CSS Triangle

J'essaie de mettre une image de fond sur une div qui est à l'aide de CSS frontières pour créer un triangle. C'est au courant de mes efforts jusqu'à présent. Il fonctionne très bien avec des couleurs solides, mais je suis à une perte quand il s'agit des images.

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/

donc, en regardant que JS Fiddle, comment pourrais-je faire grise de section également une image de fond de mon choix, plutôt que d'avoir à utiliser des couleurs comme le #111, #eee, etc..

  • Essayer; mais si vous utilisez déjà l'image, pourquoi ne pas faire le triangle d'images et transparent divs et les mettre dans le coin?
  • Parce que c'est sur un réactif de mise en page. la largeur des triangles dépend de la taille sur l'écran. En dépit de cela, votre idée a le mérite je pouvais leur faire exceptionnellement longue, de sorte qu'ils seraient bien sur toutes les tailles d'écran. Merci pour la suggestion.
  • stackoverflow.com/questions/23758922/transparent-arrow-triangle
InformationsquelleAutor user2380171 | 2013-05-14