title: Creating a CSS double border line with a step in the middle
body: <p>I'm trying to achieve this(Pic below) with strictly CSS and HTML for this header to be displayed on mobile devices. I was able to get it done, although I believe my way of doing this might be wrong. I'm adding these in two containers and getting them aligned and connected just right, is just almost impossible.</p>
  
  <p><a href="https://i.stack.imgur.com/Ofog2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ofog2.png" alt="Ignore the top screenshot line"></a></p>
  
  <p>Here's my CSS:</p>
  
  <pre><code>#shape1:before{
    position: absolute;
    bottom: 30px; left: -4px;
    content: '';
    height: 15px;
    width: 41%;
    border-bottom: 3.5px solid #000000;
    border-right: 4.5px solid #000000;
    transform: skew(-45deg);
  }
  #shape1:after{
    position: absolute;
    content: '';
    bottom: 24px; left: 0px;
    height: 16px;
    width: 41%;
    border-bottom: 3.5px solid #000000;
    border-right: 4.5px solid #000000;
    transform: skew(-45deg);
    z-index: -1;
  }
  #shape1{
    position: relative;
    height: 79.5px;
    width: 400px;
    z-index: -1;
  }
  #shape:before{
    position: absolute;
    content: '';
    right: 0px;
    width: 57.5%;
    top: 31.2px;
    z-index: -1;
    border-bottom: 3px solid #000000;
    box-shadow: 1px 2px 5px rgba(0,0,0, .3);
  }
  #shape:after{
    position: absolute;
    content: '';
    top: 36px;
    width: 56.5%;
    z-index: -1;
    right: 0px;
    border-bottom: 3px solid #000000;
    box-shadow: 1px 3px 5px rgba(0,0,0, .3);
  }
  #shape {
    height: 71px;
    width: 400px;
  }
  </code></pre>
  
  <p>Any link or shared knowledge would be appreciated. I just can't seem to find anything on this at the moment. I do also wan't to add some shadow in this and that's why you'll find some some <code>box-shadow</code> code in there, but just haven't got to it 100% yet.</p>