使用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);
}
Some content
使用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;
}
Some Content
使用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;
}