Looks simple but it is really? Cross Browser box line through?

Question

enter image description here

Hi Guys,

Thats all what I need. Looks easy, or? For the first seen yes, it is. But this box can have different width, depending on the text (number) what comes dynamically.

What I tried, or I was thinking about:

css background - If you dont know the box size, you can not do an image...
making a box (div) with 1px border-top and rotate it. - Wont work, because you dont know the angle
some months ago I solved this with svg - it was not cross browser because of IE8

I'm searching for cross browser soluton for this "simple" thing. It can be javascript or jQuery as well. Any Ideas? Thanks in advance!

score 3 · Answer 1 · answered Oct 30 '14 at 16:19

3

Pseudo-element and a linear gradient?

Codepen Demo

.box {
  width:50%;
  height:100px;
  margin:25px auto;
  border:1px solid grey;
  position: relative;
}

.box:after {
  content:"";
  position: absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background: linear-gradient(to bottom right, transparent 0%,transparent 50%,grey 50%, grey 51%, transparent 51%, transparent 100%)
}

<div class="box"></div>

answered Oct 30 '14 at 16:19

Paulie_D

107,962
13
142
161

Thanks, its great solution! I really like it! Guess whats is my problem? f***** IE8 :( – sorioz Oct 30 '14 at 16:48
You might have to use IE filter for the gradient in IE or just use a suitable bg image as a fallback. With the appropriate background-size it should be fine. – Paulie_D Oct 30 '14 at 17:43

score 1 · Accepted Answer · edited May 23 '17 at 10:33

1

Use HTML5 Canvas?

That will work on everything except IE<=8. To support older IEs you could use one of the Canvas polyfill libraries.

See: How can I use the HTML5 canvas element in IE?

edited May 23 '17 at 10:33

Community

1
1

answered Oct 30 '14 at 16:11

Paul LeBeau

97,474
9
154
181

Looks simple but it is really? Cross Browser box line through?

2 Answers2