how to set a shape to a div

Question

I would like to set a shape to a div tag. Everything works fine, but when I set an img tag inside that shape, it does not show well.

My CSS code :

#chevron{
  width: 350px;
  height: 100px;
  background: #337AB7;
  border-radius: 10px 10px 0 0;
  position: relative;
}
#chevron:before { 
  content: ''; 
  position: absolute;
  top: 20px; 
  left: 0;
  height: 100%;
  width: 51%;
  background: #337AB7;
  -webkit-transform: skew(0deg, 6deg);    -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg); }

#chevron:after { 
  content: ''; 
  position: absolute;
  top: 20px; 
  right: 0;
  height: 100%;
  width: 50%;
  background: #337AB7;
  -webkit-transform: skew(0deg, -6deg); -moz-transform: skew(0deg, -6deg); -ms-transform: skew(0deg, -6deg); -o-transform: skew(0deg, -6deg); transform: skew(0deg, -6deg); }

My html file :

<div id="chevron">
  <img  src="https://i.sstatic.net/HtYUn.jpg" style="width:120px;height:120px"/>
</div>

I want to set my shape (chevron) as a background and the inner elements should be over it.

http://jsfiddle.net/45tyb219/2/

Answer 1

Just add position: relative; and z-index: 1; to your .img - alternatively you can also add z-index: -1; to the #chevron:after.

#chevron{
  width: 350px;
  height: 100px;
  background: #337AB7;
  border-radius: 10px 10px 0 0;
  position: relative;
}
#chevron:before { 
  content: ''; 
  position: absolute;
  top: 20px; 
  left: 0;
  height: 100%;
  width: 51%;
  background: #337AB7;
  -webkit-transform: skew(0deg, 6deg);    -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg); }

#chevron:after { 
  content: ''; 
  position: absolute;
  top: 20px; 
  right: 0;
  height: 100%;
  width: 50%;
  background: #337AB7;
  -webkit-transform: skew(0deg, -6deg); -moz-transform: skew(0deg, -6deg); -ms-transform: skew(0deg, -6deg); -o-transform: skew(0deg, -6deg); transform: skew(0deg, -6deg); }

img {
    position: relative;
    z-index: 1;
}

<div id="chevron">
  <img  src="https://i.sstatic.net/HtYUn.jpg" style="margin-left: 100px;width:120px;height:120px"/>
</div>