how to create css shapes X which has to be background inside?

I need to create a X shape using css3 where the background images and text should be placed inside it. The width and height of the X shape would be 300px each. Please suggest. Thanks.

Solution

You could do this using svg's mask.

You can change the width and height by changing the #container's width and height.

#container {
  width: 80px;
  height: 100px;
}

<div id="container">
  <svg width="100%" height="100%" viewBox="0 0 80 100" preserveAspectRatio="none">
    <defs>
      <mask id="m" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="100">
        <path d="M0,0 h15 l25,38 l25,-38 h15 l-32,50 l32,50 h-15 l-25,-38 l-25,38 h-15 l32,-50" fill="white" />
      </mask>
    </defs>
    <image mask="url(#m)" width="80" height="100" xlink:href="http://www.lorempixel.com/80/100" />
  </svg>
</div>

Also, possible using pattern.

#container {
  width: 80px;
  height: 100px;
}

<div id="container">
  <svg width="100%" height="100%" viewBox="0 0 80 100" preserveAspectRatio="none">
    <defs>
      <pattern id="p" patternUnits="userSpaceOnUse" x="0" y="0" width="80" height="100">
        <image mask="url(#m)" width="80" height="100" xlink:href="http://www.lorempixel.com/80/100" />
      </pattern>
    </defs>
    <path d="M0,0 h15 l25,38 l25,-38 h15 l-32,50 l32,50 h-15 l-25,-38 l-25,38 h-15 l32,-50" fill="url(#p)" />
  </svg>
</div>

Wrapping the text inside a shape would be possible when browsers implement the shape-inside property. Currently it is only supported on -webkit- browsers and must not be used.