css - 成 Angular CSS 分隔符

Question

请看下图...

---

我想通过 CSS 实现。

我现在将此分隔符用作在我的容器内响应的图像 ( jpg )。问题是我似乎无法准确匹配颜色或使白色晶莹剔透。

我认为 CSS 是解决这个问题的最佳方式。

尺寸为 1170px x 100px

使用 Bootstrap 3.2

<div class="container">
  <div class="row">
    <img class="img-responsive" src="img/separator.gif">
  </div>
</div>

Answer 1

解决方案 1: 使用 vw 单位的边框:

DEMO (感谢 Harry 进行演示)

.separator{
    width:95vw;
    margin:0 auto;
}
.separator:before, .separator:after{
    content:'';
    display:block;
}
.separator:before{
    border-left: 95vw solid #DA7317;
    border-bottom: 60px solid transparent;
    border-right:0;
    border-top:0;
}
.separator:after{
    border-right: 95vw solid #000;
    border-top: 50px solid transparent;
    border-left:0;
    border-bottom:0;
    margin-top:-45px;
}

<div class="separator">
</div>

解决方案 2: 转换旋转:

DEMO

.separator{
    position:relative;
    padding-bottom:5.5%;
    overflow:hidden;
}
.separator:before, .separator:after{
    content:'';
    position:absolute;
  -webkit-backface-visibility:hidden;
}
.separator:before{
    background: #DA7317;
    bottom:100%; left:-1%;
    width:101%; height:200%;
    
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    
    -webkit-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);    
}
.separator:after{
    background: #000;
    top:100%;
    width:100%; height:100%;
    
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    
    -webkit-transform: rotate(-2.5deg);
    -ms-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg);  
}

<div class="separator"></div>