CSS design for cancel/cross - html

Question

I am trying to design the following image
The following has been my attempt so far, but i am just not able to get the content "x" to reach the four corners of the div.
HTML
<div id="cancel">X</div>
CSS
#cancel{
float: right;
border: 1px solid yellow;
font-family: 'Helvetica', 'Arial', sans-serif;
font-weight: lighter;
font-size: 3em;
width: 10%;
text-align: center;
background-color: #d5d6da;
color: white;
width: 12%;
cursor: pointer;
}
The following image is the output i was to be get to so far

Answer 1

I'd use a bit of scale for it - and a pseudo element :
Example
#cancel {
width: 0.9em;
height: 0.9em;
position: relative;
font-family: helvetica, arial, sans-serif;
font-weight: lighter;
font-size: 3em;
color: white;
background-color: #d5d6da;
cursor: pointer;
}
#cancel:after {
content: 'X';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%) scaleX(1.2);
transform: translate(-50%,-50%) scaleX(1.2);
}
Or without any fonts and full control over how it looks :
Demo
#cancel {
width: 40px;
height: 40px;
position: relative;
background-color: #d5d6da;
cursor: pointer;
}
#cancel:before, #cancel:after {
content: '';
width: 110%;
height: 3px;
position: absolute;
top: 50%;
left: 50%;
background: white;
}
#cancel:before {
-webkit-transform: translate(-50%,-50%) rotate(45deg);
transform: translate(-50%,-50%) rotate(45deg);
}
#cancel:after {
-webkit-transform: translate(-50%,-50%) rotate(-45deg);
transform: translate(-50%,-50%) rotate(-45deg);
}
Here we create two pseudo elements (:before and :after) that are rectangles, both having a width of 110% of the parent and a few pixels height. They are then centered horizontally and vertically inside the parent with absolute positioning and a transform: translate. Last step is to make one rotate 45 degrees and the other the same amount but in the opposite direction. This will make them form a cross - the more width the elements are given, the closer they will be to the corners of the parent (at 141% they will be touching exactly since this is the length of the diagonal compared to it's the width).

Answer 2

I might recommend using an image file such as an svg so that you get a consistent look across all browsers. If you use text like an "X" or a multiplication sign, you might get an unexpected result if the user doesn't have the same fonts installed as you do.
Here is a live example of how you could go about using inline svg. Of course if you want to reuse the icon, you should use an img tag with an external .svg file instead:
Screenshot:
Demo:
#container {
width: 50px;
height: 50px;
background-color: gray;
}
<div id="container">
<svg version="1.1" id="Layer_1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="47" viewBox="0 0 14 14" overflow="visible" enable-background="new -1.301 -0.015 17.553 14.978" xml:space="preserve">
<g>
<line fill="none" stroke="#FFFFFF" stroke-width="2" x1="1" y1="1" x2="14" y2="14" />
<line fill="none" stroke="#FFFFFF" stroke-width="2" x1="14" y1="1" x2="1" y2="14" />
</g>
</svg>
</div>

Answer 3

You are looking for the Unicode Character 'MULTIPLICATION SIGN'. Perhaps there is a more elegant solution. This should work.
HTML
<div class="close"></div>
CSS
.close {
height: 100px;
width: 100px;
background-color: #2980b9;
border-radius: 5px;
}
.close:after {
position:relative;
content:"\d7";
font-size:235px;
color:white; /* #c0392b; */
font-weight:bold;
top:-100px;
left:-24px
}
JSFiddle
http://www.fileformat.info/info/unicode/char/00d7/index.htm

Answer 4

I like the svg solution as it will scale nicely, but if you want a CSS only solution, you can achieve something "similar" by doing this:
Create the box and assign it a relative position.
Use the pseudo-elements ::before and ::after to create the X (by positioning them absolutely, using the top border, and rotating them 45 and -45 degrees).
Here is a sample on how to do it:
.cancel {
position:relative;
width:100px;
height:100px;
background:#d0d0d0;
}
.cancel::before, .cancel::after {
content:"";
position:absolute;
top:calc(50% - 5px);
left:0px;
width:100%;
border-top:10px solid white;
transform:rotate(45deg);
transform-origin: 50% 50%;
}
.cancel::after {
transform:rotate(-45deg);
}
<div class="cancel"></div>
Some good things about this solution:
It can be easily animated using CSS3 transitions/animations (for example animate the X when clicked);
It "scales" a little: as it uses percentages for the ::before and ::after, the X grows proportionally if you grow/shrink the size of the .cancel box. Example.
Some cons about this solution:
It doesn't scale as nicely as the SVG.
You many need to use prefixes to make it work on some browsers.

Answer 5

Not sure if this is what you're looking for - but perhaps try a CSS solution with no "X" content? This solution is built with four div's that are all shaped like triangles with the help of CSS borders. Depending on how you position the triangles, your "X" in the middle can be as thin or as thick as you like, and the "X" will go all the way to the corners. The positioning in what I've posted isn't incredibly elegant, but you can get around this using floats and padding. I hope this helps!
HTML:
<div class="crossBox">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS:
.crossBox div {
display: inline-block;
}
.crossBox div:first-child {
width: 0;
height: 0;
border-top: 58px solid blue;
border-left: 58px solid transparent;
border-right: 58px solid transparent;
background-color: transparent;
border-bottom: none;
position: relative;
top: -34px;
left: 5px;
}
.crossBox div:nth-child(2) {
width: 0;
height: 0;
border-left: 58px solid blue;
border-top: 58px solid transparent;
border-bottom: 58px solid transparent;
background-color: transparent;
border-right: none;
position: relative;
left: -118px;
top: 30px;
}
.crossBox div:nth-child(3) {
width: 0;
height: 0;
border-right: 58px solid blue;
border-top: 58px solid transparent;
border-bottom: 58px solid transparent;
background-color: transparent;
border-left: none;
position: relative;
left: -116px;
top: 30px;
}
.crossBox div:nth-child(4) {
width: 0;
height: 0;
border-bottom: 58px solid blue;
border-left: 58px solid transparent;
border-right: 58px solid transparent;
background-color: transparent;
border-top: none;
position: relative;
top: 36px;
left: -239px;
}