Angled CSS Separator

Question

Please see the below image...

---

I would like to make this via CSS.

I'm using this separator now as an image ( jpg ) that is responsive inside my container. The problem is that I can't seem to match colors exactly or get the white crystal clear and sharp.

I think CSS would be best way to solve this problem.

The dimensions are 1170px x 100px

Using Bootstrap 3.2

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

Answer 1

Using SVG: ^Recommended

You could make use of SVG to create the shape. Since it is a separator (which implies, it is not going to contain any text within the shape), it is more like an image and SVG fits the case perfectly. SVG can auto-scale without having any impact to the actual shape and since it is vector based, it doesn't get pixelated on scaling either.

We can use either SVG path or polygons to create this shape. Below are the sample snippets.

/* Using SVG Path */

svg {
  height: 100px;
  width: 1170px;
}
path#top {
  fill: rgb(218, 115, 23);
}
path#bottom {
  fill: rgb(42, 42, 42);
}

<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
  <path d='m 0,0 h 100 l -100,95z' id='top' />
  <path d='m 0,100 h 100 l 0,-90z' id='bottom' />
</svg>

/* Using SVG Polygons */

svg {
  height: 100px;
  width: 1170px;
}
polygon#top {
  fill: rgb(218, 115, 23);
}
polygon#bottom {
  fill: rgb(42, 42, 42);
}

<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
  <polygon points='0,0 100,0 0,95' id='top' />
  <polygon points='0,100 100,100 100,10' id='bottom' />
</svg>

---

Using Gradients:

You could achieve the shape by using two linear-gradient for background and position them appropriately like in the below snippet. Linear gradients can scale without affecting the shape.

.separator {
  height: 100px;
  width: 1170px;
  background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 49%, rgb(218, 115, 23) 50%), 
    linear-gradient(to top left, rgb(42, 42, 42) 49%, rgba(0, 0, 0, 0) 50%);
  background-size: 100% 95%, 100% 90%;
  background-position: 0% 0%, 0% 90%;
  background-repeat: no-repeat;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="separator"></div>

None of the approaches produce a perfectly smooth output for the white colored area in the middle. While SVG produces more smoother edges, gradients produce a very rough/coarse output.

Answer 2

Solution 1 : with borders with vw units :

DEMO (credits to Harry for the demo)

.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>

Solution 2: with transform rotate :

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>