The disappointing thing here is that the "X" isn't transparent (which is how I would likely create a PNG, at least).
I put together this quick test. http://jsfiddle.net/UM3a2/22/embedded/result/ which allows you to color the positive space while leaving the negative space transparent. Since it is made entirely of borders it is easy to color since border-color defaults to the text color.
It doesn't fully support I.E. 8 and earlier (border-radius issues), but it degrades to a square fairly nicely (if you're okay with a square close button).
It also requires two HTML elements since you are only allowed two pseudo elements per selector. I don't know exactly where I learned this, but I think it was in an article by Chris Coyier.
<div id="close" class="arrow-t-b">
Close
<div class="arrow-l-r"> </div>
</div>
#close {
border-width: 4px;
border-style: solid;
border-radius: 100%;
color: #333;
height: 12px;
margin:auto;
position: relative;
text-indent: -9999px;
width: 12px;
}
#close:hover {
color: #39F;
}
.arrow-t-b:after,
.arrow-t-b:before,
.arrow-l-r:after,
.arrow-l-r:before {
border-color: transparent;
border-style: solid;
border-width: 4px;
content: "";
left: 2px;
top: 0px;
position: absolute;
}
.arrow-t-b:after {
border-top-color: inherit;
}
.arrow-l-r:after {
border-right-color: inherit;
left: 4px;
top: 2px;
}
.arrow-t-b:before {
border-bottom-color: inherit;
bottom: 0;
}
.arrow-l-r:before {
border-left-color: inherit;
left: 0;
top: 2px;
}