title: Draw cross background up/down via css which is responsive
body: <p>How to draw such an shape via css in a single section(div)?</p>
  
  <p>currently i have used three div check my code :)</p>
  
  <p>The idea is simple, for top, from horizontally middle the orange color first need to go down at 45 degree till next 100px and then it should go at 180 degree for remaining part.</p>
  
  <p>For bottom, from horizontally middle the orange color first need to go down at 45 degree till next 100px and then it should go at 180 degree for remaining part. </p>
  
  <p>All this needs to be done for a single container/section/div.</p>
  
  <p><a href="https://i.stack.imgur.com/VJHqJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VJHqJ.png" alt="enter image description here"></a></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>.grad {
    height:100px;
    width:100%;
    background:linear-gradient(45deg, white 50%, #f3ab2a 0),
    linear-gradient(blue 20%, black 0);
  }
  
  .grad1 {
    height:100px;
    width:100%;
    background:linear-gradient(-130deg, #f3ab2a 0%, #f3ab2a 0),
    linear-gradient(blue 20%, black 0);
  }
  .grad2 {
    height:100px;
    width:100%;
    background:linear-gradient(45deg, #f3ab2a 50%, white 50%)}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grad2"&gt;
  
  &lt;/div&gt;
  
  &lt;div class="grad1"&gt;
  
  &lt;/div&gt;
  &lt;div class="grad"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>