看起来很简单，但真的吗？跨浏览器框线通过？答案

【问题标题】：Looks simple but it is really? Cross Browser box line through?看起来很简单，但真的吗？跨浏览器框线通过？
【发布时间】：2014-10-31 00:19:15
【问题描述】：

大家好，

这就是我所需要的。看起来很简单，还是？对于第一次看到是的，它是。但是这个框可以有不同的宽度，这取决于动态出现的文本（数字）。

我尝试了什么，或者我在想什么：

css 背景 - 如果你不知道盒子的大小，你就不能做一个图像......
制作一个顶部边框为 1px 的框 (div) 并旋转它。 - 行不通，因为你不知道角度
几个月前我用 svg 解决了这个问题 - 因为 IE8，它不是跨浏览器

我正在为这个“简单”的东西寻找跨浏览器解决方案。它也可以是 javascript 或 jQuery。有任何想法吗？提前致谢！

【问题讨论】：

标签： jquery html css svg

【解决方案1】：

伪元素和线性渐变？

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%)
}

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：

谢谢，它的解决方案很棒！我很喜欢！猜猜我的问题是什么？ f***** IE8 :(
您可能必须使用 IE 过滤器来处理 IE 中的渐变，或者只使用合适的 bg 图像作为后备。使用适当的背景大小应该没问题。

【解决方案2】：

使用 HTML5 画布？

这将适用于除 IE

见：How can I use the HTML5 canvas element in IE?

【讨论】：