How to create a cross with pure css [duplicate]

Question

How to create a cross (x) inside a div that cointains an image? The cross must also overlap the image, is possible do it in pure css or I must to create a new image with the cross?

Answer 1

CSS-

#cross {
   width: 100px;
   height: 100px;
   position: relative;
  transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
}

#cross:before, #cross:after {
  content: "";
  position: absolute;
  z-index: -1;
  background: #d00;
}

#cross:before {
  left: 50%;
  width: 30%;
  margin-left: -15%;
  height: 100%;
}

#cross:after {
  top: 50%;
  height: 30%;
  margin-top: -15%;
  width: 100%;
}

Demo

Ways to reproduce this-

Step-

Create a simple square by adding no background color to it-

 #cross {
       width: 100px;
       height: 100px;
       position: relative;
    }

Second step-

`CSS gives you compatibility to play with sudo-elements`.

There is always content space onto every element in css.

Example- Adding before after sudo-element

Third step- By aligning these before after elements position:absolute to relative parent you get the shape.

Last step- Transform rotate it the way you want. an example-

Transform in css

By the way @Adam's way of doing this is clever and once preferred by me.