Question

我要创建一个进度条，就像下图一样（使用红色和绿色形成鲜明对比）。 progress bar

我的代码如下

// react 
class App extends React.Component {
  render () {
    return (
      <div className='home-page-wrapper'>
        <ProgressBar />
      </div>
    );
  }
}

// css 
.outter {
  width: 260px;
  height: 46px;
  border-radius: 22px;
  background: green;
  overflow: hidden;
  

  .inner {
    width: 100%;
    height: 100%;
    background: red;
    transform: translateX(100px);
  }
}

问题是红色的div不能完全覆盖绿色的，看起来红色的div有一个绿色的边框，我该怎么办？

Answer 1

您可以使用此代码：

.outter {
    width: 260px;
    height: 46px;
    border-radius: 22px;
    background: green;
    overflow: hidden;
}
.outter .inner {
    height: 100%;
    background: red;
    border-radius: 22px;
}

<div class="outter">
  <div class="inner" style="width: 70%;"></div>
</div>

更改 .inner 宽度属性以执行渐进。

Answer 2

请试试这个：

.progress-bar {
  width:90%;
  height:30px;
  overflow:hidden;
  background:green;
  border-radius:6px;
}

.bar {
  float:left;
  height:100%;
  background:red;
}

<div class="progress-bar">
    <div class="bar" style="width:45%">
    </div>
</div>

如何完全覆盖另一个div

2 个答案: