title: Css Shape Creation Curved Wave
body: <p><img src="https://i.stack.imgur.com/9pTph.png" alt="How this Css shapes are created"></p>
  
  <p><a href="http://jsfiddle.net/hQ74b/1/" rel="nofollow noreferrer">This is what i have got so far </a>
  <a href="http://jsfiddle.net/DYYWU/1/" rel="nofollow noreferrer">After after checking out tutorial</a></p>
  
  <ul>
  <li>I want know how curved effect is generated on divs the only question that i found near to what i was looking for was <a href="https://stackoverflow.com/questions/17202548/create-wavy-border-with-css">At here at stackoverlow </a> but that too dint help
  <img src="https://i.stack.imgur.com/IdiOI.png" alt="enter image description here"></li>
  <li>How folded edge effect is created on as in the above picture</li>
  </ul>
  
  <h2>Css</h2>
  
  <pre><code>#MenuShape{
     height:50px;
     background-color:orange; 
     width:200px;
      position:relative;
      text-align:center;
      left:100px;
  
  }
  #MenuShape:after{
          content:"";
     position: absolute;
      width: 0;
     height: 0;
     left:200px;
    border-top: 50px solid transparent;
      border-left: 100px solid orange;
      border-bottom: 0px solid transparent;
  
  }
  #MenuShape:before{
          content:"";
     position: absolute;
      width: 0;
     height: -50;
     left:-100px;
    border-top: 50px solid transparent;
      border-right: 100px solid orange;
      border-bottom: 0px solid transparent;
  
  }
  </code></pre>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div id="MenuShape"  &gt;
      sachin
  
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://css-tricks.com/" rel="nofollow noreferrer">https://css-tricks.com/</a> this the site on inspecting it i found its span wrapped 
  anchor tag along with svg tag</p>
  
  <pre><code>  &lt;a href="/" class="home"&gt;
      &lt;svg viewBox="0 0 100 25" class="shape-tab"&gt;
        &lt;use xlink:href="#shape-tab"&gt;&lt;/use&gt;
      &lt;/svg&gt;
  
    &lt;span&gt;Blog&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/vwZWr" rel="nofollow noreferrer">Click here to see the unexpected behaviour it  works fine in codepen </a></p>