title: Triangle and inverted triangle using CSS borders
body: <p>I am trying to achieve the following image example using CSS borders. Is this possible? Also, is it possible for it to be responsive as well? I started a fiddle <a href="http://jsfiddle.net/markob83/46KAa/" rel="nofollow noreferrer">here.</a> I know I've seen this somewhere, but can't remember where. </p>
  
  <p><img src="https://i.stack.imgur.com/k8Vtn.png" alt="enter image description here"></p>
  
  <p>Here is what I have so far - </p>
  
  <p>HTML </p>
  
  <pre><code>&lt;div class="container"&gt;
  
      &lt;div class="row"&gt;
  
          &lt;div class="sign-up col-sm-9"&gt;
  
              &lt;div class="col-sm-4"&gt;
  
                  &lt;h3&gt;SIGN UP to get the latest updates on Security News&lt;/h3&gt;
  
              &lt;/div&gt;
  
              &lt;div class="col-sm-4"&gt;
  
              &lt;/div&gt;
  
              &lt;div class="col-sm-4"&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;  &lt;!-- /.sign-up --&gt;          
  
          &lt;div class="invert"&gt;&lt;/div&gt;
  
              &lt;div class="submit col-sm-3"&gt;
  
                  &lt;input type="submit" value="Submit"&gt;
  
              &lt;/div&gt;
  
      &lt;/div&gt; &lt;!-- /.row --&gt;
  
  &lt;/div&gt;&lt;!-- /.container --&gt;
  </code></pre>
  
  <p>CSS - </p>
  
  <pre><code>.sign-up {
    background: #002d56;
    padding: 0px 0px;
    color: #ffffff;
    font-size: 20px;
  }
  
  .sign-up h3{
    padding: 10px 0px;
    font-size: 20px;
  }
  
  .sign-up:after {
    content: "";
    display: block;
    width: 0; 
    height: 0; 
    border-top: 70px solid #ffffff;
    border-bottom: 69px solid #ffffff;
    border-left: 70px solid #002d56;
    position: absolute;
    right: 0;
  }
  
  .invert {
    position:relative;
  }
  
  .invert:after {
    content: "";
    display: block;
    width: 0; 
    height: 0; 
    border-top: 70px solid #cfab7a;
    border-bottom: 69px solid #cfab7a;
    border-left: 70px solid #ffffff;
    position: absolute;
    right: 118px;
  }
  
  .submit {
    background: #cfab7a;
    width: 0; 
    height: 0; 
  }
  
  .submit:before {
  
  }
  
  .submit input[type="submit"] {
    background: #cfab7a;
    padding: 10px 0px;
    border: none;
  }
  </code></pre>