html - CSS triangle with background image -

this question has answer here:

• how css triangles work? 17 answers
• creating transparent arrow above image in css3 2 answers

respected stackoverflowers,

how create triangle element background pattern?

for example need div :

but state :

all examples triangle elements use borders cant have img in ....

this subsection class needs coolarrow:

<div class="subsection"><span>ryan gosling, mr landlord</span></div>  .subsection {   .box-shadow (0, -1px, 1px, 0, rgba(0, 0, 0, 0.3));   background: url('/assets/pattern-lorem.png'); // inner part of slider have pattern   display: block;   clear: both;   float: left;   width: 100%;   padding-top: 15px;   padding-bottom: 15px;   display: none; } .subsection {     position:relative; } .subsection:before {     content:'';     position:absolute;     top:0;     left:0;     height:20px;     width:0;     border-left:20px solid white;     border-bottom:16px solid transparent; } .subsection:after {     content:'';     position:absolute;     top:36px;     left:0;     bottom:0;     width:0;     border-left:20px solid white;     border-top:16px solid transparent; } 

and im getting :

which fine ...how can bring arrow on top in required form ? ... , overlaying cases div ? ... thanks.

if don't care cross browser compatibility, can use pseudo-element rotate 45 degrees , attach styles it. thing need additionally background, rotated (back) 45deg attach pseudo element:

div.coolarrow:before {     content: '';     position: absolute;     z-index: -1;     top: -24.7px;     left: 10px;     background-color: #bada55;     width: 50px;     height: 50px;      background: url(url/to/your/45deg/rotated/background.gif);      box-shadow: inset 0 0 10px #000000;     transform: rotate(45deg);  } 

here's short fiddle illustrate (without background):
fiddle

to work out other cases 90degree arrows, need skew rect additionaly. , don't know happens background image...