创建一个在中间有一个步骤的CSS双边框线 [英] Creating a CSS double border line with a step in the middle
问题描述
我尝试通过严格的CSS和HTML实现这一点（如下图所示），以便在移动设备上显示此标题。我能够完成，虽然我相信我的做法这可能是错误的。我将它们添加到两个容器中，使它们对齐和连接正确，几乎是不可能的。
这是我的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 {
位置：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
使用CSS转换：
为了实现双边框使用CSS没有任何问题，使它们正确对齐，倾斜变换是最好的赌注，因为我们可以始终固定的点，转换发生（因此消除任何潜在的问题，对齐）。但是，我们不能使用这种方法使用 double 边框，因为倾斜变换将导致斜边上的边框线看起来彼此相比更靠近顶部和底部。要解决这个问题，我们必须使用一个额外的子元素。
输出是完全响应的，这可以通过查看全页的代码段输出来验证。
.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％; double-inner-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'>一些内容
p>
使用CSS渐变效果：
下面是一个非常复杂的方法，相比较前一个，但我发布在这里只是给了一些不同的想法。具有斜面的整个双边框可以使用线性渐变（以及一点变换）来实现。虽然这会产生预期的输出，但我不会推荐它。使用这种方法只能得到一些关于渐变效果的想法：）
.double-border {position：relative; height：100px; width：100％; border-top：1px solid; overflow：hidden;}。double-border：before {position：absolute; content：'';高度：100％; width：calc（50％+ 10px）; left：-10px; top：0px;背景：线性梯度（右，黑99.9％，透明99.9％），线性梯度（右，黑99.9％，透明99.9％）;背景重复：无重复; background-position：-4.5px 97px，-9px 91px; background-size：100％3px;}。double-border：after {position：absolute; content：'';高度：100％; width：calc（50％+ 10px）; left：-10px; top：0px;背景：线性梯度（右，黑99.9％，透明99.9％），线性梯度（右，黑99.9％，透明99.9％），线性梯度（右，rgba（0,0,0,0.3 ）99.9％，透明99.9％），线性梯度（右，rgba（0,0,0,0.3）99.9％，透明99.9％）;背景重复：无重复; 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;左：50％; transform：translateX（-50％）rotate（-45deg）;背景：线性梯度（右，黑99％，透明99％），线性梯度（右，黑95％，透明95％），线性梯度（右，rgba（0,0,0,0.3 ）99％，透明99％），线性梯度（右，rgba（0,0,0,0.3）95％，透明95％）;背景重复：无重复; 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'>一些内容
使用SVG：
方法来绘制这样的形状或复杂的线条将SVG（它也有响应的好处，并可以适应任何尺寸的变化），但使用SVG为这一个有一些缺点：
- 如果标题的高度是恒定的，只有宽度根据设备而改变，SVG将不得不拉伸/缩小以适应容器（取决于原始尺寸），这将使得中间的倾斜线看起来歪斜（或）伸长。 （以全屏模式查看该代码段。）
- 在SVG中，默认情况下，笔触也会缩放。这可以通过将
向量效果属性设置为非缩放笔划来避免，但目前此属性不是由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>
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.
Here's my 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;
}
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 box-shadow code in there, but just haven't got to it 100% yet.
解决方案 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);
}
<div class='double-outer-border'>
Some content
<div class='double-inner-border'></div>
</div>
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;
}
<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>
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;
}
<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>
这篇关于创建一个在中间有一个步骤的CSS双边框线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录 关闭
