条形图，类似于Bootstrap进度条。

Question

我想实现以下内容： 我想用这些代表从数据库中提取的数据。但我无法弄清楚如何实现。

所以我想我可以可能使用Bootstrap进度条，但稍微改变一下样式。

这是HTML中的样子： http://www.bootply.com/QOwn8Bs0wY 有人知道如何使这些线更加接近吗？

我认为这与Bootstrap中的这些CSS样式有关。

 -webkit-linear-gradient(135deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)

但我无法复制这张图片。

- Matthew Smart

---

.progress-bar-striped { background: repeating-linear-gradient( 135度, #464, #8f8 3像素, #868 1像素 ) } - Michael Laffargue

看起来很好，但还没有仔细观察。 - Matthew Smart

Answer 1

像这样的东西？

background-color: gray;
background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px);

我稍微修改了this，比Bootstrap更容易理解。然后别忘了使它跨浏览器兼容。

- Fester

Answer 2

试一下这个

.progress {border-radius:0;}
.progress-bar-striped, .progress-striped .progress-bar {
    linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 7px 7px;
}

- Chukwuemeka Ihedoro