看起来很简单，但确实如此？跨浏览器框通过？

Question

嗨，大家好，

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

我尝试过，或者我在考虑：

• css background - 如果您不知道盒子大小，则无法拍摄图片......
• 制作一个带有1px border-top的盒子（div）并旋转它。 - 不会工作，因为你不知道角度
• 几个月前我用svg解决了这个问题 - 由于IE8，它不是跨浏览器

我正在寻找跨浏览器的解决方案，这简单＆＃34;事情。它也可以是javascript或jQuery。有任何想法吗？提前谢谢！

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

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

Answer 2

使用HTML5 Canvas？

这将适用于IE＆lt; = 8以外的所有内容。要支持旧的IE，您可以使用其中一个Canvas polyfill库。

请参阅：How can I use the HTML5 canvas element in IE?