在容器外渐变并在容器内继续

Question

我有以下 sn-p ：

.test {
  margin-top: 50px; 
  margin-bottom: 50px; 
  padding-bottom:7px;
  background: /* gradient can be an image */
    linear-gradient(
      to left,
      black 0%,
      #FFFFFF 100%
    )
    left
    bottom
    #777
    no-repeat;
  background-size:100% 7px ;/* if linear-gradient, we need to resize it */
}

.test2{
  border-bottom: 7px solid black
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
<div class="test"></div>
<div class="container">
  <div class="test2"></div>
</div>

而预期的结果是休闲：

红线是容器开始的地方。我想在容器外制作从 0% 到 100% 的渐变，并在容器内继续使用黑色。这可以实现吗？

Answer 1

我认为您可以尝试使用 ::before 和 ::after 伪元素，这是一个示例：

https://jsfiddle.net/pierrep/8hdnzgfa/

SCSS：

.inside_bar {
  width: 100%;
  height: 10px;
  background: #000;
  position: relative;

  &::before {
    content: '';
    width: 17.5%;
    height: 100%;
    background: linear-gradient(to right, transparent, #000);
    position: absolute;
    left: 0;
    transform: translateX(-100%);
  }

  &::after {
    content: '';
    width: 17.5%;
    height: 100%;
    background: linear-gradient(to left, transparent, #000);
    position: absolute;
    transform: translateX(100%);
    right: 0;
  }
}

CSS：

.inside_bar {
  width: 100%;
  height: 10px;
  background: #000;
  position: relative;
}

.inside_bar::before {
  content: '';
  width: 17.5%;
  height: 100%;
  background: linear-gradient(to right, transparent, #000);
  position: absolute;
  left: 0;
  transform: translateX(-100%);
}

.inside_bar::after {
  content: '';
  width: 17.5%;
  height: 100%;
  background: linear-gradient(to left, transparent, #000);
  position: absolute;
  transform: translateX(100%);
  right: 0;
}