看起來很簡單，但它是真的嗎？跨瀏覽器框線通過？

Question

嗨，大家好，

這就是所有我需要什麼。看起來很容易，或？ 首先看到的是，它是。但是這個盒子可以有不同的寬度，這取決於文本（數字）是什麼動態的。

我試過了，還是我在想：

• CSS背景 - 如果你不知道盒子的大小，你不能做的圖像...
• 製作盒子（DIV）與1px border-top並旋轉它。 - 不會工作，因爲你
• 幾個月前不知道的角度我解決了這個與SVG - 它不是跨瀏覽器IE8，因爲的

我在尋找跨瀏覽器soluton這個「簡單」的事。它也可以是JavaScript或jQuery。有任何想法嗎？提前致謝！

Answer 1

使用HTML5畫布？

這將工作的一切除了IE < = 8。要支持較老的IE，你可以使用Canvas的一個polyfill庫。

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

Answer 2

僞元件和一個線性梯度？

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>