Creating a CSS double border line with a step in the middle

Question

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

Answer 1

Using CSS Transforms:

To achieve the double border using CSS without any problems in getting them aligned properly, skew transforms are the best bet as we can always fix the points about which the transform happens (thus eliminating any potential problems with alignment). However, we cannot use double border with this approach because skew transformation would cause the border lines on the angled sides to look a lot closer to each other than on top and bottom. To overcome this, we have to use an extra child element.

The output is perfectly responsive and this can be verified by viewing the snippet output in full page.

.double-outer-border {
  position: relative;
  border-top: 1px solid;
  height: 100px;
  width: 100%;
  overflow: hidden;
}
.double-outer-border:before,
.double-outer-border:after,
.double-inner-border:before,
.double-inner-border:after {
  position: absolute;
  content: '';
  height: 20px;
  bottom: 0px;
  width: 50%;
  transform: skew(-45deg);
}
.double-outer-border:before {
  left: -2px;
}
.double-outer-border:after {
  right: -2px;
}
.double-inner-border:before {
  left: -4px;
  bottom: 4px;
}
.double-inner-border:after {
  right: 0px;
  bottom: 4px;
}
.double-outer-border:before,
.double-inner-border:before {
  border-bottom: 3px solid;
  border-right: 4px solid;
  transform-origin: right bottom;
}
.double-outer-border:after,
.double-inner-border:after {
  border-top: 3px solid;
  border-left: 4px solid;
  transform-origin: left bottom;
  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .3);
}

  Some content
  

---

Using CSS Gradients:

The below is a very complex approach compared to the earlier one but I am posting it here just to give some different ideas. The whole double border with a slant can be achieved using linear-gradients (and a bit of transforms also). Though this produces the expected output, I wouldn't recommend it. Use this approach only to get some ideas on what all can be done with gradients :)

.double-border {
  position: relative;
  height: 100px;
  width: 100%;
  border-top: 1px solid;
  overflow: hidden;
}
.double-border:before {
  position: absolute;
  content: '';
  height: 100%;
  width: calc(50% + 10px);
  left: -10px;
  top: 0px;
  background: linear-gradient(to right, black 99.9%, transparent 99.9%), linear-gradient(to right, black 99.9%, transparent 99.9%);
  background-repeat: no-repeat;
  background-position: -4.5px 97px, -9px 91px;
  background-size: 100% 3px;
}
.double-border:after {
  position: absolute;
  content: '';
  height: 100%;
  width: calc(50% + 10px);
  left: -10px;
  top: 0px;
  background: linear-gradient(to right, black 99.9%, transparent 99.9%), linear-gradient(to right, black 99.9%, transparent 99.9%), linear-gradient(to right, rgba(0,0,0,0.3) 99.9%, transparent 99.9%), linear-gradient(to right, rgba(0,0,0,0.3) 99.9%, transparent 99.9%);
  background-repeat: no-repeat;
  background-position: -7.5px 75px, -9px 81px, -8.5px 77px, -10px 83px;
  background-size: 100% 3px;
  transform: scaleX(-1);
  transform-origin: right;
}
.slanted-border {
  position: absolute;
  height: 25px;
  width: 25px;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%) rotate(-45deg);
  background: linear-gradient(to right, black 99%, transparent 99%), linear-gradient(to right, black 95%, transparent 95%), linear-gradient(to right, rgba(0,0,0,0.3) 99%, transparent 99%), linear-gradient(to right, rgba(0,0,0,0.3) 95%, transparent 95%);
  background-repeat: no-repeat;
  background-position: 0px 11px, -2px 17px, 0px 13px, -2px 19px;
  background-size: 100% 3px;
}

  Some Content
  

---

Using SVG:

Generally the easiest method to draw such shapes or complex lines would be SVG (which also has the benefit of being responsive and can adapt to any change in dimensions) but there are a few drawbacks of using SVG for this one:

• If the height of your header is constant and only the width changes based on the device then the SVG will have to stretch/shrink to fit the container (depending on the original dimensions) and this would make the slanted line in the middle either look crunched (or) elongated. (View the snippet in full page mode.)
• The stroke would also get scaled by default in SVG. This can be avoided by setting the vector-effect attribute to non-scaling-stroke but at present this property is not supported by IE and thus this solution is not cross-browser compatible.

path {
  stroke: black;
  fill: none;
  stroke-width: 2;
}
svg {
  height: 100px;
  width: 100%;
  border-top: 1px solid;
}