html – 在中间创建一个CSS双边框线

为了实现使用CSS的双边框,没有任何问题使它们正确对齐,偏斜变换是最好的选择,因为我们可以随时修正变换发生的点(从而消除任何潜在的对齐问题).然而,我们不能使用这种方法的双边框,因为偏斜变换将导致角形边上的边界线看起来比顶部和底部更接近.为了克服这个问题,我们必须使用一个额外的子元素.

输出是完美的响应,这可以通过查看全页的片段输出来验证.

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

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

使用CSS渐变：

下面是一个比较早的一个非常复杂的方法,但是我在这里发贴只是给出一些不同的想法.可以使用线性渐变(以及一点转换)来实现具有倾斜的整个双边框.虽然这会产生预期的产出,但我不会推荐它.使用这种方法只能得到一些想法,可以做什么所有可以做的渐变:)

.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,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,rgba(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%),black 95%,transparent 95%),0.3) 99%,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有一些缺点：

>如果您的标题的高度是恒定的,并且只有宽度根据设备而改变,则SVG将必须拉伸/缩小以适应容器(取决于原始尺寸),这将使中间的倾斜线看起来蜷缩(或)细长. (以全页模式查看该片段.)
> SVG中的笔画也默认缩放.这可以通过将vector-effect属性设置为非缩放笔画来避免,但目前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>