title: How to make diagonal div
body: <p>I'm trying to make diagonal div, so i could create this shape: 
  <a href="https://i.stack.imgur.com/k4qaP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k4qaP.png" alt="How to make diagonal div "></a>
  I use bootstrap grid, and I already made three div containers for the shape.</p>
  
  <p>It will be made by 3 parts, 2 of them is diagonal and one is straight.
  I made the 3 parts. but i don't know how to make it diagonal.</p>
  
  <p><a href="http://codepen.io/Ariel7342/pen/EPxLQe" rel="nofollow noreferrer">example in codepen</a></p>
  
  <p>html:</p>
  
  <pre><code>    &lt;body ng-app="appt" ng-controller="AppController" &gt;
      &lt;div class="row test-row"&gt;
          &lt;div class="col-lg-4 test-outbox"&gt;
              &lt;div class="test-inbox test-inbox-center col-lg-10 col-lg-offset-1"&gt;
                  &lt;span class="test-s"&gt;&lt;/span&gt;
                  &lt;span class="test-s"&gt;&lt;/span&gt;
                  &lt;div class="test-d"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-4 test-outbox"&gt;
              &lt;div class="test-inbox test-inbox-center col-lg-10 col-lg-offset-1"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-4 test-outbox"&gt;
              &lt;div class="test-inbox test-inbox-center col-lg-10 col-lg-offset-1"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>css :</p>
  
  <pre><code>    .test-row{
      width: 100%;
      margin-right: 0;
      margin-left: 0;
      position: fixed;
      top: 100px;
  }
  
  .test-outbox{
      border:1px black solid;
      height:350px;
  }
  
  .test-inbox-center {
      height: 300px;         /*your login box height*/
      position: absolute;
      top: 50%;
      margin-top: -150px;    /*height/2*/
      border:1px black solid;
      border-radius: 3px;
      background-color:white;
      padding: 0;
  }
  .test-s:nth-child(even){
      height: 100px;
      width: 76px;
      top: 150px;
      position: absolute;
      border:1px black solid;
      right: 0;
  }
  .test-s:nth-child(odd){
      height: 100px;
      width: 76px;
      top: 150px;
      position: absolute;
      border:1px black solid;
      left: 0;
  }
  .test-d{
  
  }
  </code></pre>