html - 创建中间有台阶的 CSS 双边框线

Question

我正在尝试使用严格的 CSS 和 HTML 来实现这一点(下图)，以便在移动设备上显示此 header 。我能够完成它，尽管我相信我这样做的方式可能是错误的。我将它们添加到两个容器中并让它们正确对齐和连接，这几乎是不可能的。

这是我的 CSS:

#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;
}

任何链接或共享知识将不胜感激。我现在似乎找不到任何东西。我也不想在其中添加一些阴影，这就是为什么您会在其中找到一些 box-shadow 代码，但还没有 100% 做到这一点。

Answer 1

使用 CSS 转换:

为了使用 CSS 实现双边框而没有任何问题让它们正确对齐，倾斜变换是最好的选择，因为我们总是可以修复发生变换的点(从而消除任何潜在的对齐问题)。但是，我们不能通过这种方法使用 double 边框，因为倾斜变换会导致 Angular 边上的边框线看起来比顶部和底部的边框线更靠近彼此。为了克服这个问题，我们必须使用一个额外的子元素。

输出是完美响应的，这可以通过在整页中查看代码段输出来验证。

.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);
}

<div class='double-outer-border'>
  Some content
  <div class='double-inner-border'></div>
</div>

---

使用 CSS 渐变:

与前面的方法相比，下面是一种非常复杂的方法，但我将其张贴在这里只是为了提供一些不同的想法。可以使用 linear-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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='double-border'>
  Some Content
  <div class='slanted-border'></div>
</div>

---

使用 SVG:

一般来说，绘制此类形状或复杂线条的最简单方法是 SVG(它还具有响应迅速的优势，可以适应尺寸的任何变化)，但使用 SVG 有一些缺点:

• 如果标题的高度不变，只有宽度根据设备发生变化，则 SVG 将不得不拉伸(stretch)/收缩以适合容器(取决于原始尺寸)，这会使斜线位于中间要么看起来嘎吱嘎吱(或)拉长。 (以整页模式查看代码段。)
• 笔画在 SVG 中也会默认缩放。这可以通过将 vector-effect 属性设置为 non-scaling-stroke 来避免，但目前 IE 不支持该属性，因此该解决方案不能跨浏览器兼容。

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

<svg viewBox='0 0 500 100' preserveaspectratio='none'>
  <path d='M0,98 240,98 260,75 500,75' vector-effect='non-scaling-stroke'/>
  <path d='M0,94 237.5,94 257.5,71 500,71' vector-effect='non-scaling-stroke'/>
</svg>