natsuki_1996 natsuki_1996 - 1 year ago 286
CSS Question

Draw an X in CSS

I've got a div that looks like a orange square

enter image description here

I'd like to draw a white X in this div somehow so that it looks more like

enter image description here

Anyway to do this in CSS or is it going to be easier to just draw this in Photoshop and use the image as the div background? The div code just looks like

div {
height: 100px;
width: 100px;
background-color: #FA6900;
border-radius: 5px;

Answer Source

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

See JSFiddle:


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


#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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download