Insert a line on a box 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

I need a put this line crossing a square.... can i do this in css? — Adriano Varlotta, Apr 01 '14 at 02:26
Relevant: http://stackoverflow.com/questions/18012420/draw-diagonal-lines-in-div-background-with-css — geoff, Apr 01 '14 at 02:42

King King · Accepted Answer · 2014-04-01T03:03:55.570

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

woah there, epic code, much better than my answer! :D pseudo-selectors FTW. — Zack, Apr 01 '14 at 09:11
@deraad thanks, in fact the idea of using transform also makes me surprised, the quality of the diagonal is higher but we have to calculate too much :) — King King, Apr 01 '14 at 09:15

Zack · Answer 2 · 2014-04-01T02:45:52.960

1

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/

edited Apr 01 '14 at 02:45

answered Apr 01 '14 at 02:32

Zack

1,615
18
26

score 1 · Answer 3 · answered Apr 01 '14 at 02:51

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

Insert a line on a box CSS

3 Answers3