Insert a line on a box CSS - css

Question

I want to make that line crossing the square (image below) in css, could anyone help me?
img http://www.brainmotion.com.br/download/img.png
If i have a div like this:
<div class="abcd">
</div>
.a {border:1px solid;}
Thanks so much

Answer 1

You can try using CSS triangle trick to render 2 triangles, the first has border-color the same as the color you want, the second has border-color the same as the background-color of the div:
div {
width:49px;
height:49px;
border:1px solid black;
position:relative;
}
div:before {
content:'';
position:absolute;
width:0;
height:0;
top:-1px;
left:-1px;
border:25px solid transparent;
border-right:25px solid black;
border-bottom:25px solid black;
z-index:-3;
}
div:after {
position:absolute;
content:'';
width:0;
height:0;
top:1px;
left:1px;
border:24px solid transparent;
border-right:24px solid white;
border-bottom:24px solid white;
z-index:-2;
}
Here is the fiddle
Note that with this solution, you have to tweak it a little with trial and error method.
UPDATE: Another simple method is using linear-gradient to generate the diagonal dynamically for the background of the div like this:
div {
width:50px;
height:50px;
border:1px solid black;
position:relative;
text-align:center;
line-height:50px;
font-size:25px;
background:linear-gradient(to bottom right, white, white 48%, black 50%, white 52%, white);
}
Here is the updated fiddle

Answer 2

Yes, you could do this using transform: rotate(45deg); in combination with overflow: hidden on the parent <div>, but I would highly discourage that, as It would be a disaster in terms of browser compatibility. I would just use the image.
Here is an example (note: quick and sloppy) that I tested in chrome that works:
http://jsfiddle.net/97xsh/1/

Answer 3

here is one that achieves the same effect.
http://jsfiddle.net/j8USa/1/
.box{
width:40px;
height:40px;
border:1px #000 solid;
overflow:hidden;
position:relative;
text-align:center;
vertical-align:middle;
}
.strike{
position:absolute;
width:60px;
height:1px;
border-top:1px #000 solid;
margin-top:20px;
margin-left:-10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.box span{
vertical-align:middle;
font-size: 26pt;
color:red;
}