natsuki_1996 natsuki_1996 - 2 months ago 25x
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;


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;