如何将CSS箭头的背景扩展到整个页面宽度？

Question

我正在尝试使用CSS创建一个向下箭头（.down）作为单页网站各部分之间的装饰元素。

问题是.down-class的背景颜色没有跨越页面的整个宽度：

这是我的代码：

HTML：

... </div>

<!-- About End-->


<div id="seperator"></div>

<div class="down"></div>


<!-- Portfolio -->

<div class="container-portfolio"> ... </div>

CSS：

#seperator {
    background: #34495E;
    height: 10px;
    left: 0; right: 0;
}

.down {
   width: 0px;
   height: 0px;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
   border-top: 20px solid #34495E;
   margin:  0 auto;
   background: #16A085;
   background-size: 100%;
 }

我已经尝试修改.down-class的background-size属性，遗憾的是没有成功。我很感激你的建议。谢谢。

Answer 1

尝试在.down div上设置背景并赋予其100％宽度，然后将“箭头”创建为:after伪元素。

#seperator {
  background: #34495E;
  height: 10px;
  left: 0; right: 0;
}

.down {
  width: 100%;
  background: #16A085;
}

.down:after {
  content: '';
  display: block;
  margin: 0 auto;
  width: 0px;
  height: 0px;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #34495E;
}

像这样：

http://jsbin.com/APIyEbIp/1/edit

Answer 2

您可能想要换行另一个背景类。像这样：

#seperator {
    background: #34495E;
    height: 10px;
    left: 0; right: 0;
}

.down {
   width: 0px;
   height: 0px;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
   border-top: 20px solid #34495E;
   margin:  0 auto;

 }

.down_bkg {
        background: #16A085;
        background-size: 100%;
        width:100%;
    }

HTML就像这样：

<div id="seperator"></div>

<div class="down_bkg">
    <div class="down"></div>
</div>

Answer 3

尝试更新下层CSS

宽度：100％或 最小宽度：100％