Draw an X in CSS

Asked 9 years, 6 months ago Modified 4 months ago Viewed 166k times

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

69

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

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

html css draw css-shapes

Share Improve this question edited Feb 15, 2015 at 14:47 asked Sep 20, 2013 at 15:31
Follow Gildas.Tambo natsuki_2002
22k 7 50 78 23.8k 19 45 50

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

1 @topcat3 — Think how that would sound in a screen reader. – Quentin Mar 2, 2020 at 10:24

Sorted by:
15 Answers Highest score (default)

You want an entity known as a cross mark:

100 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:

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 ×.

Share Improve this answer Follow edited Jul 7, 2015 at 19:23 answered Sep 20, 2013 at 15:37
Marc Audet
45.6k 11 63 83

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

7 The hex code for the Unicode character 'MULTIPLICATION SIGN' is \D7 (U+00D7), thus the CSS code
would be content: "\D7"; – Spyryto Sep 20, 2017 at 10:19
72
single element solution:

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>

Run code snippet Hide results Full page

 Share Improve this answer Follow edited Feb 15, 2015 at 14:45 answered Sep 20, 2013 at 16:00
Gildas.Tambo
22k 7 50 78

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

15 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! – FirstVertex Sep 10, 2014 at 20:57

2 I completely agree with H Dog, this is the correct answer. Using the &#10060; in Chrome displays a
question mark in a box. Using a font angles the ends of the cross. Well done Tambo!! – Rogala Mar 9,
2015 at 16:01

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. – Rashid Clark Jul 10, 2020 at 18:08

Yet another pure CSS solution (i.e. without the use of images, characters or additional fonts),
based on @Bansoa is the answer's answer .
43
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>
 Run code snippet Expand snippet

Share Improve this answer Follow edited Aug 2, 2021 at 20:21 answered Nov 15, 2016 at 20:54
Neurotransmitter
6,061 2 50 37

1 Suppose I want it to work with non-square DIVs and to not preserve aspect ratio? – Ross Presser Oct 4,
2018 at 13:15

1 @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> . – Neurotransmitter Feb 5, 2020 at 10:26

1 Best answer here yet. – avia Aug 2, 2021 at 7:26

You can make a pretty nice X with CSS gradients:

21

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>

Share Improve this answer Follow answered Sep 3, 2018 at 0:05

JasonWoof
4,156 1 19 28

Yet another attempt... this one uses ×. A lot of the examples on this page only show for me as
a box, but &times; works
19
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

Share Improve this answer Follow answered Sep 20, 2013 at 15:52
Gray
7,020 2 29 51

Reference for the &times; entity: fileformat.info/info/unicode/char/00d7/index.htm – Marc Audet

Sep 20, 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? – Gray Sep 20, 2013 at 16:35

I am working on a Windows 7 machine. So you don't see the cross mark in my fiddle? – Marc Audet Sep
20, 2013 at 17:05

Correct. I am using Windows 7 with Chrome (same results with IE/FF). Here is a screencap:
i.imgur.com/u9UwCQZ.png – Gray Sep 20, 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 – Netsurfer Sep 20, 2013 at 17:34

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

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

Share Improve this answer Follow answered Sep 20, 2013 at 15:45
AJT
334 2 6 29

8 Since this was selected, I will extract the (possibly) useful info from my answer and put it here.
&times; might look nicer than an X depending on your font. – Gray Sep 20, 2013 at 15:55

6 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 ...! – Netsurfer Sep 20, 2013 at
16:05

1 @Netsurfer 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.
– Gray Sep 20, 2013 at 16:33

4 @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. – Netsurfer Sep 20, 2013 at 17:06

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

You can use the CSS property "content":

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

div:after {
content: "X";
font-size: 2em;
color: #FFF;
}

Like this: http://jsfiddle.net/HKtFV/

Share Improve this answer Follow answered Sep 20, 2013 at 15:36
António Regadas
724 4 11
9
#x{
width: 20px;
height: 20px;
background-color:orange;
position:relative;
border-radius:2px;
}
#x::after,#x::before{
position:absolute;
top:9px;
left:0px;
content:'';
display:block;
width:20px;
height:2px;
background-color:red;

}
#x::after{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#x::before{
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

<div id=x>
</div>

Run code snippet Expand snippet

Share Improve this answer Follow answered Sep 22, 2014 at 15:15
user669677

I love this question! You could easily adapt my code below to be a white × on
an orange square:
8

Demo fiddle here

Here is the SCSS (which could easily be converted to CSS):

$pFontSize: 18px;
p {
font-size: $pFontSize;
}
span{
font-weight: bold;
}
.x-overlay,
.x-emoji-overlay {
position: relative;
}

.x-overlay,
.x-emoji-overlay {
&:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: red;
text-align: center;
}
}

.x-overlay:after {
content: '\d7';
font-size: 3 * $pFontSize;
line-height: $pFontSize;
opacity: 0.7;
}

.x-emoji-overlay:after {
content: "\274c";
padding: 3px;
font-size: 1.5 * $pFontSize;
line-height: $pFontSize;
opacity: 0.5;
}

.strike {
position: relative;
display: inline-block;
}

.strike::before {
content: '';
border-bottom: 2px solid red;
width: 110%;
position: absolute;
left: -2px;
top: 46%;
}

.crossed-out {
/*inspired by https://www.tjvantoll.com/2013/09/12/building-custom-text-
strikethroughs-with-css/*/
position: relative;
display: inline-block;
&::before,
&::after {
content: '';
width: 110%;
position: absolute;
left: -2px;
top: 45%;
 opacity: 0.7;
}
&::before {
border-bottom: 2px solid red;
-webkit-transform: skewY(-20deg);
transform: skewY(-20deg);
}
&::after {
border-bottom: 2px solid red;
-webkit-transform: skewY(20deg);
transform: skewY(20deg);
}
}

Share Improve this answer Follow answered Mar 11, 2017 at 15:51
Ryan
21.9k 29 172 348

You could do this by styling an "x"

5 text-align: center;
font-size: 120px;
line-height: 100px;
color: white;
font-family: monospace;

http://jsfiddle.net/Ncvyj/1/

Share Improve this answer Follow answered Sep 20, 2013 at 15:40
Explosion Pills
187k 51 325 398

Here is a single div and dynamic size version without using pseudo element.

4
body {
display: flex;
gap: 30px;
}

.x {
--color: #444;
--l: 5px; /* line-width */
width: 50px;
height: 50px;
background: linear-gradient(to top right, transparent calc(50% - var(--l) /
2), var(--color) calc(50% - var(--l) / 2) calc(50% + var(--l) / 2), transparent
calc(50% + var(--l) / 2)),
linear-gradient(to bottom right, transparent calc(50% - var(--l)
/ 2), var(--color) calc(50% - var(--l) / 2) calc(50% + var(--l) / 2),
transparent calc(50% + var(--l) / 2));

--clip-path: polygon(var(--l) 0%, calc(100% - var(--l)) 0%, 100% var(--l),

100% calc(100% - var(--l)), calc(100% - var(--l)) 100%, var(--l) 100%, 0%
calc(100% - var(--l)), 0% var(--l));
-webkit-clip-path: var(--clip-path);
clip-path: var(--clip-path);
}
 <div class="x"></div>

<div class="x" style="--l: 10px;"></div>

<div class="x" style="--l: 15px; --color: red"></div>

<div class="x" style="--l: 15px; --color: dodgerblue; width: 100px; height:

100px;"></div>

Run code snippet Expand snippet

Share Improve this answer Follow answered Apr 5, 2021 at 19:20

doğukan
21.1k 12 54 66

A modern answer with good browser support.

2 <span>&times;</span>

This technically puts the multiplication symbol there, but no one will really notice (found some
websites that have a popup box and most use this for the x button).

If you need more control you can style it with color opacity etc...

example (index.html)

<span class="x-button">&times;</span>

styles.css

span.x-button {
color:gray;
opacity:0.7;
font-size:1.5em;
}

Result (first example)

<span>&times</span>

Run code snippet Expand snippet

Result (2nd example)

 span {
color:gray;
opacity:0.7;
font-size:1.5em;
}

<span class="x-button">&times;</span>

Run code snippet Expand snippet

Note: you can highlight this unlike other solutions, but this may not be desirable depending on
the application. You can solve this in pure css too, just add

user-select:none;
-webkit-user-select:none;

Share Improve this answer Follow edited Nov 23, 2022 at 23:44 answered Nov 23, 2022 at 23:29
Fighter178
135 1 8

You also shouldn't really need to worry about the aspect ratio as most English text is already 1:1.
(though it is often centered). – Fighter178 Nov 23, 2022 at 23:46

HTML

1 <div class="close-orange"></div>

CSS

.close-orange {
height: 100px;
width: 100px;
background-color: #FA6900;
border-radius: 5px;
}
.close-orange:before,.close-orange:after{
content:'';
position:absolute;
width: 50px;
height: 4px;
background-color:white;
border-radius:2px;
top: 55px;
}
.close-orange:before{
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transform:rotate(45deg);
left: 32.5px;
}
.close-orange:after{
 -webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
transform:rotate(-45deg);
left: 32.5px;
}

https://jsfiddle.net/cooperwebdesign/dw4xd289/

Share Improve this answer Follow answered Aug 20, 2016 at 11:21
Dennis Sørensen
21 2

This is an adaptable version of the amazing solution provided by @Gildas.Tambo elsewhere in

this page. Simply change the values of the variables at the top to change the size of the "X".
0
Credit for the solution itself goes to Gildas. All I've done is given it adaptable math.

:root {
/* Width and height of the box containing the "X" */
--BUTTON_W: 40px;
/* This is the length of either of the 2 lines which form the "X", as a
percentage of the width of the button. */
--CLOSE_X_W: 95%;
/* Thickness of the lines of the "X" */
--CLOSE_X_THICKNESS: 4px;
}

body{
background:blue;
}

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

/* The "X" in the button. "before" and "after" each represent one of the two
lines of the "X" */
div:before,div:after{
content: '';
position: absolute;
width: var(--CLOSE_X_W);
height: var(--CLOSE_X_THICKNESS);
background-color:white;
border-radius: 2px;
top: calc(50% - var(--CLOSE_X_THICKNESS) / 2);
box-shadow: 0 0 2px 0 #ccc;
}
/* One line of the "X" */
div:before{
-webkit-transform:rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
left: calc((100% - var(--CLOSE_X_W)) / 2);
}
/* The other line of the "X" */
 div:after{
-webkit-transform:rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
right: calc((100% - var(--CLOSE_X_W)) / 2);
}

<div></div>

Run code snippet Expand snippet

Share Improve this answer Follow answered Jul 10, 2020 at 18:04
Rashid Clark
71 1 2

Check & and Cross:

-1 <span class='act-html-check'></span>
<span class='act-html-cross'><span class='act-html-cross'></span></span>

<style type="text/css">
span.act-html-check {
display: inline-block;
width: 12px;
height: 18px;
border: solid limegreen;
border-width: 0 5px 5px 0;
transform: rotate( 45deg);
}

span.act-html-cross {
display: inline-block;
width: 10px;
height: 10px;
border: solid red;
border-width: 0 5px 5px 0;
transform: rotate( 45deg);
position: relative;
}

span.act-html-cross > span { {

transform: rotate( -180deg);
position: absolute;
left: 9px;
top: 9px;
}
</style>

Share Improve this answer Follow answered Mar 2, 2020 at 10:20

realmag777
2,040 1 24 22