如何使用CSS制作双色条纹？

Question

我想制作以下条纹。这样做的正确方法是什么？

Answer 1

看起来你正在寻找渐变。当您想要使用多种颜色进行样式时，通常会使用此选项。

默认情况下垂直显示渐变。要水平显示，我们需要使用可选的direction参数。在这种情况下，它是to right。

我无法弄清楚图像中使用的颜色是什么，但它们看起来像深绿色和酸橙。

＆＃13;

＆＃13;

#colored {
  background: linear-gradient(to right, DarkGreen 70%, lime);
  width: 100%;
  height: 50px;
}

＆＃13;

<div id="colored"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

或者，您可以使用渐变：

＆＃13;

＆＃13;

var progress = document.getElementById('progress');
var complete = 0;
var c1 = '#75ae2c', c2 = '#9dd156';
var timer = setTimeout(function loop() {
  var bg = 'linear-gradient(to right, ' + c1 + ' 0%,' + c1 + ' ' + complete + '%,' + c2 + ' ' + complete + '%,' + c2 + ' 100%)';
  progress.style.background = bg;
  progress.innerHTML = 'Process is ' + complete + '% complete';

  complete++;
  if (complete <= 100) setTimeout(loop, 100);
}, 0);

＆＃13;

#progress {
  padding: 10px;
  width: 200px;
  text-align: center;
}

＆＃13;

<div id="progress">
</div>

＆＃13;

＆＃13;

＆＃13;

它有点复杂，但是div-inside-div的优势在于它不会干扰内容。

Answer 3

您需要的只是一个较短的div，颜色较深，另一个颜色较浅。

这就是Bootstrap如何实现其进度条。

HTML：

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
  </div>
</div>

CSS：

.progress {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}

Answer 4

div内有div个内容

HTML：

<div class="stripe">
    <div class="stripe-left"></div>
    <div class="stripe-right"></div>
</div>

CSS

.stripe {
    height: 20px;
    width: 200px;
}

.stripe-left {
    display: inline-block;
    height: 100%;
    width: 60%;
    background-color: red;
}

.stripe-right {
    display: inline-block;
    height: 100%;
    width: 40%;
    background-color: blue;
}