Question

我制作了一个没有问题的水平进度条

但进度条的垂直线不正确。

我把问题写进了一张照片。

HTML

<body>
    <div class="progress-bar  horizontale">
        <div class="inner"><span>|||||||</span></div>
    </div>
    <div class="progress-bar verticale">
        <div class="inner"><span>___ ___ ___ ___ ___</span></div>
    </div>
</body>

CSS

body {
    background: url('https://www.dropbox.com/s/8g7pf7ig7fw5e0v/main_bg.png') repeat;
}

.progress-bar.verticale {
    width: 24px;
    height: 300px;
    /*border: 1px solid #060707;*/
    margin: 10px auto;
    background-color: rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 3px #000000 inset, 0 0 2px rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 4px;
    transform: rotate(180deg);
    display: inline-block;
}


.progress-bar.horizontale {
    width: 300px;
    height: 24px;
    /*border: 1px solid #060707;*/
    margin:  auto;

    background-color: rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 3px #000000 inset, 0 0 2px rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 4px;
    display: inline-block;
}

.progress-bar.horizontale .inner {
    background: linear-gradient(#FFCC33, #CC9900);
    border-radius: 12px;
    position: absolute;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 -1px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 1px #000000;
    height: 24px;
    width: 200px;
}

.progress-bar.horizontale .inner span {
    background: repeat scroll 0 0 #999999;
    position: absolute;
    font: bold  120px/40px sans-serif ;
    letter-spacing: -6px;
    height: 24px;
    opacity: 0.06;
    overflow: hidden;
    transform: skewX(-30deg);
}

.progress-bar.verticale .inner {
    background: linear-gradient(#FFCC33, #CC9900);
    border-radius: 12px;
    position: absolute;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 -1px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 1px #000000;
    height: 200px;
    width: 24px;
}

.progress-bar.verticale .inner span {
    background: repeat scroll 0 0 #999999;
    position: absolute;
    font: bold  20px/30px sans-serif ;
    letter-spacing: -6px;
    height: 200px;
    width: 20px;
    opacity: 0.06;
    overflow: hidden;
    transform: skewY(30deg);
}

这里是Picture

Answer 1

您可以通过将下划线_替换为像这样的粗字符来使线条变粗：▀

A demo.

修改字符的ASCII码：223（上半部分）。

Answer 2

你可以加粗这样的线条：

  .progress-bar.verticale .inner span {
      background: repeat scroll 0 0 #999999;
      position: absolute;
      font: bold  120px/30px sans-serif ; //thicken lines to same width as horizontal progress bar. 
      letter-spacing: -6px;
      height: 200px;
      width: 25px; //change width to fit width of div. 
      opacity: 0.06;
      overflow: hidden;
      transform: skewY(30deg);
      margin:0px 0px 0px 0px;
      bottom: 35px; //Position revision to justify font resizing. 
 }

使用html和css3创建垂直进度条？

2 个答案: