title: How to design Diagonal Type DIV with V shape Style?
body: <p>How to Design DIV with full width in Diagonal Style but with V Shape in Top &amp; Bottom Border.</p>
  
  <p>Note : I had already tried many Possible Solutions to design exactly same like Image Reference I provided but yet I dont find any Optimized Solutions for this.
  Skew Method, Top &amp; Bottom Div with assigning Border Width with one Middle (total 3 Div Set Styles I had tried but it allowed me only with shaping 2 corners of div but yet i wont find any possible solution.</p>
  
  <p><a href="https://i.stack.imgur.com/xOrhS.png" rel="nofollow noreferrer">DIV CSS Shaping</a></p>
  
  <p>This is the thing which I want to Design.</p>
  
  <p>Thanks in Advance for Help.</p>
  
  <p>his is variation of code which I had tried : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tridiv{
   width: 1170px;
      margin: 0 auto;
      background-color: #CCCCCC;
      color: #000000;
      height: 500px;
      box-sizing: border-box;
  /*-webkit-clip-path: polygon(100% 0, 100% 71%, 50% 100%, 0 65%, 0 0, 51% 33%);
  clip-path: polygon(100% 0, 100% 71%, 50% 100%, 0 65%, 0 0, 51% 33%);*/
   }
  
  .tridiv:before {
      content:"";
      -moz-transform: skewX(10deg);
      -webkit-transform: skewX(10deg);
      transform: skewX(10deg);
      width: 90%;
      left: 0;
   right:0;
      height: 500px;
      background-color: #555;
      position: absolute;
      z-index: -1;
   margin:0 auto
  }
  
  
  .box {
    background-color: skyblue;
    margin-top: 50px;
    padding: 5% 20px; /* Added a percentage value for top/bottom padding to keep the wrapper inside of the parent */
    
    -webkit-transform: skewY(-5deg);
    -moz-transform: skewY(-5deg);
    -ms-transform: skewY(-5deg);
    -o-transform: skewY(-5deg);
    transform: skewY(-5deg);
  }
  
  .box &gt; .wrapper {
    -webkit-transform: skewY(5deg);
    -moz-transform: skewY(5deg);
    -ms-transform: skewY(5deg);
    -o-transform: skewY(5deg);
    transform: skewY(5deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
        &lt;div class="wrapper"&gt;
          &lt;h1&gt;This is a heading&lt;/h1&gt;
          &lt;p&gt;This is a sub-heading&lt;/p&gt;
          &lt;p&gt;
            &lt;a href="http://stackoverflow.com/questions/22352311/how-do-i-draw-a-diagonal-div/22352383#22352383"&gt;
              How do I draw a Diagonal div?
            &lt;/a&gt;
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;div class="tridiv"&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu dapibus quam. Proin non faucibus nisi. Quisque ac mi lectus. Suspendisse metus purus, congue nec ornare eu, hendrerit vel sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas volutpat diam elementum lacus porta rhoncus. In hac habitasse platea dictumst. Aenean volutpat massa quis nulla elementum et commodo ligula fringilla. Sed pellentesque, risus eu rutrum volutpat, sem elit feugiat tellus, id molestie sapien turpis sit amet ante. Maecenas nec mollis orci. Integer lacus nulla, facilisis ac ullamcorper sit amet, commodo quis est. Quisque pharetra urna vitae leo suscipit vulputate luctus enim tincidunt. Curabitur blandit lobortis lobortis. Phasellus rhoncus arcu sed nunc tempus ut dictum tellus elementum.&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>