Draw an X in CSS

V

15

72

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

Vicentevicepresident answered 20/9, 2013 at 15:31 Comment(2)

can you not just use the letter X and give it an absolute position and color white and place on top of the background – Sprite 20/9, 2013 at 15:36

@Sprite — Think how that would sound in a screen reader. – Killy 2/3, 2020 at 10:24

B

18

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

Balaklava answered 20/9, 2013 at 15:45 Comment(8)

Since this was selected, I will extract the (possibly) useful info from my answer and put it here. × might look nicer than an X depending on your font. – Shockley 20/9, 2013 at 15:55

All other answers proposing the use of a pseudo element (::before or ::after) are much more to prefer, because this would be semantically correct in contrast to this answer. That the questioner has chosen this answer shows that there might be a lack of understanding ...! – Norvin 20/9, 2013 at 16:5

@Norvin I agree that using the pseudo-elements are preferred, but I am not sure I would say that doing this is "semantically incorrect." There are many benefits to using a pseudo-element (I think the most important is the fact that you cannot select the text), but that doesn't make this solution wrong. – Shockley 20/9, 2013 at 16:33

@Gray: It does! Because if the 'X' has a 'function' then it should be an <input> or <button> element. And if not, it is purely "presentational markup". So it is wrong in both cases. And assumed it serves only for presentational purposes then it should be done with CSS and not adding any non-content to the markup. – Norvin 20/9, 2013 at 17:6

@Norvin Interesting point of view. Thanks for the clarification. I can see your point when you put it like that. – Shockley 20/9, 2013 at 17:26

Just add line-height: 2.5rem; for vertical centralization of X. – Barger 31/7, 2019 at 7:50

@Norvin In what way is that "semantically correct"? Simply using a pseudo element doesn't make the answer any more or less correct. In fact, it leads to more lines of code and makes things slightly harder to read, which means it is a worse solution since it has the exact same result. AT92 understands this problem perfectly well and has provided the simplest and most readable solution out of any of the answerers, which means he has the best answer (so long as you're okay with your X looking like the character X) Just saying something is semantically incorrect is not useful to anyone. Explain – Slave 23/2, 2021 at 21:21

@Slave - Re: "In what way is that "semantically correct"?" I agree, it's important to have an explanation, so here's one: The markup above is a <div> containing a <span> containing a text node. But it's a user-interactive element which requires focus-ability and tab-ability. So it should be <button type="button"> - and any associated text should be a user-prompt like "Close" (or similar), not "X". – Obvolute 23/11, 2022 at 23:38

C

101

You want an entity known as a cross mark:

http://www.fileformat.info/info/unicode/char/274c/index.htm

The code for it is ❌ and it displays like ❌

If you want a perfectly centered cross mark, like this:

cross mark demo

try the following CSS:

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

div:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: "\274c"; /* use the hex value here... */
    font-size: 50px; 
    color: #FFF;
    line-height: 100px;
    text-align: center;
}

See Demo Fiddle

Cross-Browser Issue

The cross-mark entity does not display with Safari or Chrome. However, the same entity displays well in Firefox, IE and Opera.

It is safe to use the smaller but similarly shaped multiplication sign entity, × which displays as ×.

Copartner answered 20/9, 2013 at 15:37 Comment(2)

Any idea how to force a color on the cross mark in Safari? It is always rendered as red... – Cardon 7/7, 2015 at 14:20

The hex code for the Unicode character 'MULTIPLICATION SIGN' is \D7 (U+00D7), thus the CSS code would be content: "\D7"; – Hunchbacked 20/9, 2017 at 10:19

G

73

single element solution: enter image description here

body{
    background:blue;
}

div{
    width:40px;
    height:40px;
    background-color:red;
    position:relative;
    border-radius:6px;
    box-shadow:2px 2px 4px 0 white;
}

div:before,div:after{
    content:'';
    position:absolute;
    width:36px;
    height:4px;
    background-color:white;
    border-radius:2px;
    top:16px;
    box-shadow:0 0 2px 0 #ccc;
}

div:before{
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    transform:rotate(45deg);
    left:2px;
}
div:after{
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    transform:rotate(-45deg);
    right:2px;
}

<div></div>

Gegenschein answered 20/9, 2013 at 16:0 Comment(4)

Probably overly complex for this application, but a very good demonstration of what can be done with transforms. – Copartner 20/9, 2013 at 16:24

This is the real answer! Nice. Definitely not "overly complex" it is perfect because it doesn't use a font and it can scale to any size. Upvoted! – Later 10/9, 2014 at 20:57

I completely agree with H Dog, this is the correct answer. Using the ❌ in Chrome displays a question mark in a box. Using a font angles the ends of the cross. Well done Tambo!! – Axel 9/3, 2015 at 16:1

Amazing solution, upvoted. I've added an answer which adds adaptive math to your work, full credit for the solution itself given to you of course. – Sheri 10/7, 2020 at 18:8

I

48

Yet another pure CSS solution (i.e. without the use of images, characters or additional fonts), based on @Bansoa is the answer's answer .

I've simplified it and added a bit of Flexbox magic to make it responsive.

Cross in this example automatically scales to any square container, and to change the thickness of its lines one have just to tune height: 4px; (to make a cross truly responsive, you may want to set the height in percents or other relative units).

div {
    position: relative;
    height: 150px; /* this can be anything */
    width: 150px;  /* ...but maintain 1:1 aspect ratio */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

div::before,
div::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 4px; /* cross thickness */
    background-color: black;
}

div::before {
    transform: rotate(45deg);
}

div::after {
    transform: rotate(-45deg);
}

<div></div>

Isoelectronic answered 15/11, 2016 at 20:54 Comment(3)

Suppose I want it to work with non-square DIVs and to not preserve aspect ratio? – Lifesaving 4/10, 2018 at 13:15

@RossPresser you can use something like transform: scale(1, 0.75); to scale the cross to whatever shape you want. It has to be applied to the <div>. – Isoelectronic 5/2, 2020 at 10:26

Best answer here yet. – Unplumbed 2/8, 2021 at 7:26

B

23

You can make a pretty nice X with CSS gradients:

demo: https://codepen.io/JasonWoof/pen/rZyRKR

code:

<span class="close-x"></span>
<style>
    .close-x {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 7px solid #f56b00;
        background:
            linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,#fff 45%,#fff 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%),
            linear-gradient(135deg, #f56b00 0%,#f56b00 43%,#fff 45%,#fff 55%,#f56b00 57%,#f56b00 100%);
    }
</style>

Benthamism answered 3/9, 2018 at 0:5 Comment(0)

S

19

Yet another attempt... this one uses ×. A lot of the examples on this page only show for me as a box, but × works

HTML

<div class="close"></div>

CSS

.close {
    height: 100px;
    width: 100px;
    background-color: #FA6900;
    border-radius: 5px;
}
.close:after {
    position:relative;
    content:"\d7";
    font-size:177px;
    color:white;
    font-weight:bold;
    top:-53px;
    left:-2px
}

JSFIDDLE

Shockley answered 20/9, 2013 at 15:52 Comment(6)

Reference for the × entity: fileformat.info/info/unicode/char/00d7/index.htm – Copartner 20/9, 2013 at 16:33

@MarcAudet Thanks for that link. I hadn't seen that site before, and it is pretty helpful. For your answer though, I only see boxes. Do you have a Mac by any chance? – Shockley 20/9, 2013 at 16:35

I am working on a Windows 7 machine. So you don't see the cross mark in my fiddle? – Copartner 20/9, 2013 at 17:5

Correct. I am using Windows 7 with Chrome (same results with IE/FF). Here is a screencap: i.imgur.com/u9UwCQZ.png – Shockley 20/9, 2013 at 17:27

Also a nice solution, especially with the entity. I just had to reposition it a bit to center the 'x' - see updated jsFiddle – Norvin 20/9, 2013 at 17:34

@Shockley Indeed, you are right, the cross mark does not display in Chrome, see the following test page: fileformat.info/info/unicode/char/274c/browsertest.htm I am not sure why this is happening, the same problem is seen in Safari on Windows. Works in Opera and IE, however. – Copartner 20/9, 2013 at 18:20

B

18

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