Create a Cross Shape in CSS

Create a cross shape in CSS

You could achieve something like this with pseudoelements only:

http://jsbin.com/upiyoc/1/edit

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

#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%;
}

The size of the cross will proportionally scale, according to the width and height of the #cross element

Update: another solution (using less code) could simply involve multiple linear-gradients (without pseudolements) e.g.

http://codepen.io/anon/pen/zxwgPo

#cross {
  width: 100px;
  height: 100px;

  background: linear-gradient(to bottom, transparent 35%, 
                                         #d00 35%, 
                                         #d00 65%,  
                                         transparent 65%),

              linear-gradient(to right, transparent 35%, 
                                         #d00 35%, 
                                         #d00 65%,  
                                         transparent 65%),
}

Draw an X in CSS

You could just put the letter X in the HTML inside the div and then style it with css.

See JSFiddle: http://jsfiddle.net/uSwbN/

HTML:

<div id="orangeBox">
  <span id="x">X</span>
</div>

CSS:

#orangeBox {
  background: #f90;
  color: #fff;
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  width: 40px;
  height: 40px;
  border-radius: 5px;
}

HTML / CSS - Cross Shape with picture in it

Add background-position:center; in #cross:before, #cross:after

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

#cross:before, #cross:after {
  content: "";
  position: absolute;
  z-index: -1;
  background-size:100px 100px;
  background-image:url('http://www.gm-consult.de/uploads/pics/homer-simpson_20.jpg');
  background-position:center;
}

#cross:before {
  left: 50%;
  width: 30%;
  margin-left: -15%;
  height: 100%;
  -webkit-transform: rotate(45deg); 
  -moz-transform: rotate(45deg);
}

#cross:after {
  top: 50%;
  height: 30%;
  margin-top: -15%;
  width: 100%;
  -webkit-transform: rotate(45deg); 
  -moz-transform: rotate(45deg);
}

Draw cross background up/down via css which is responsive

Similary to my previous answer, you need to add the top part and adjust few values:

.header {  height:400px;  background:    /*Top part*/    linear-gradient(to bottom left,transparent 49%,orange 50.5%) top center/100px 100px,    linear-gradient(orange,orange) top left/calc(50% - 49px) 100px,    /*middle part */    linear-gradient(orange,orange) center/100% calc(100% - 200px),    /*Bottom part similary to the top*/    linear-gradient(to top right,transparent 49%,orange 50.5%) bottom center/100px 100px,    linear-gradient(orange,orange) bottom right/calc(50% - 49px) 100px;   background-repeat:no-repeat;}

<div class="header">
</div>

Creating complex shapes using CSS

There are a few options for creating non-rectangular shapes using CSS, but they are all hacks. This isn't something that you'd normally expect to do using CSS.

The most well known technique is triangles made using borders. It is very much a hack, and would require using multiple elements for a single shape. I wouldn't suggest using it on a production site.

The other CSS solution I can think of would be to use an extreme border-radius setting to modify the shape of the box. This is less hacky, but won't work in IE8 and lower, so fails your criteria.

You say you've tried the SVG approach and given up on it because it doesn't work in IE8. It's worth pointing out that while IE doesn't support SVG, it does support VML, which is a competing vector graphics format. SVG is now standardised, so VML will fade away, but older IEs will continue to support it.

Therefore the solution I'd go with would be to use SVG by default, and VML instead on IE7/8. The good news is that there are several Javascript solutions which make this easy.

One is Raphael, which allows you to draw SVG/VML images using Javascript. Commonly used for real-time graphs, etc.

There are also a number of solutions which simply convert SVG to VML. For example http://code.google.com/p/svg2vml/. But there are several others available.

Hope that helps.

How to make a star or a cross using an svg ellipse?

I am not entirely sure what you mean by

I can not use anything else other than ellipse

If you strictly follow that restriction, then your request would seem close to impossible.

Your first attempt is a nice idea, but unfortunately it may have issues. Creating circles or ellipses with stroke widths that are greater than the radius (technically, more than double the radius), can not always be trusted to render correctly.

The approach that Robert suggested is better and more flexible, but will require the use of SVG elements other than <ellipse>

For example take the following design.

svg {
  width: 400px;
}

<svg viewBox="0 0 100 70">
  <ellipse cx="50" cy="35" rx="40" ry="28"
           fill="none" stroke="black" stroke-width="1"/>

  <g class="cross">
    <rect x="0" y="20" width="100" height="30" transform="rotate(35, 50,35)"/>
    <rect x="0" y="20" width="100" height="30" transform="rotate(-35, 50,35)"/>
  </g>
</svg>

Create a Cross Shape in CSS