使用中间的步骤创建CSS双边框线

时间:2015-09-21 22:42:01

标签: html css css3 border css-shapes

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

Ignore the top screenshot line

这是我的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%的代码。

4 个答案:

答案 0 :(得分:13)

使用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%;
  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 Gradients:

下面是一个非常复杂的方法,与之前的方法相比,但我在这里发布它只是为了给出一些不同的想法。可以使用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必须拉伸/收缩以适合容器(取决于原始尺寸),这将使斜线位于中间要么看起来嘎吱作响(或)拉长。 (以整页模式查看代码段。)
  • 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>

答案 1 :(得分:4)

我在codepen上放了一个响应示例,两个容器的宽度为50%。这些可以相应地改变。不幸的是,在响应环境中,除了精确的像素宽度之外的其他任何东西都会导致线条倾斜部分的宽度变化,因为我确定你已经发现了。

&#13;
&#13;
#shape1:before {
  position: absolute;
  bottom: 38.5px;
  left: -10px;
  content: '';
  height: 15px;
  width: 100%;
  border-bottom: 3.5px solid #000000;
  border-right: 4.5px solid #000000;
  transform: skew(-45deg);
  background-color: white;
}
#shape1:after {
  position: absolute;
  content: '';
  bottom: 33px;
  left: -10px;
  height: 16px;
  width: 100%;
  border-bottom: 3.5px solid #000000;
  border-right: 4.5px solid #000000;
  transform: skew(-45deg);
  z-index: -1;
  background-color: white;
}
#shape1 {
  position: relative;
  height: 79.5px;
  width: 50%;
  z-index: -1;
}
#shape:before {
  position: absolute;
  content: '';
  right: 0px;
  width: 50%;
  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: 50%;
  z-index: -1;
  right: 0px;
  border-bottom: 3px solid #000000;
  box-shadow: 1px 3px 5px rgba(0, 0, 0, .3);
}
#shape {
  height: 71px;
  width: 50%;
}
&#13;
<div id="shape1"></div>
<div id="shape"></div>
&#13;
&#13;
&#13;

答案 2 :(得分:4)

我不确定CSS是实现这一目标的最佳方式。就个人而言,如果我想要显示您正在显示的连接双线,我会使用SVG。但把它放在一边,这是一个简单的CSS解决方案。

此方法使用CSS边框,相对定位,转换和inline-block。它也响应(沿着x轴)。

让所有三条线顺利连接并非易事(正如您所说)。由于对齐所需的精度,您可能需要调整多个值才能在您的站点上运行。不确定它是否值得,但如果图像格式不是一种选择,我希望这会有所帮助。

<强> HTML

<div id="container">
    <div id="left-line"></div>
    <div id="center-line"></div>
    <div id="right-line"></div>
</div>

<强> CSS

#container {
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: black;
    width: 100%;
    }

#left-line {
    display: inline-block;
    width: 45%;
    height: 100px;
    border-bottom-color: black;
    border-bottom-style: double;
    border-bottom-width: 11px;
    }

#right-line {
    display: inline-block;
    width: 45%;
    height: 100px;
    border-bottom-color: black;
    border-bottom-style: double;
    border-bottom-width: 12px;
    position: relative;
    bottom: 18px;
    left: -15px;
    }

#center-line {
    display: inline-block;
    width: 20px;
    height: 36px;
    border-left-color: black;
    border-left-style: double;
    border-left-width: 11px;
    position: relative;
    left: -2px;
    bottom: -11px;

    -ms-transform: rotate(55deg);
    -webkit-transform: rotate(55deg);
    transform: rotate(55deg);
}

@media screen and (max-width: 500px) {
    #left-line { width: 40%; }
    #right-line { width: 40%; }
}

@media screen and (max-width: 400px) {
    #left-line { width: 35%; }
    #right-line { width: 35%; }
}

@media screen and (max-width: 300px) {
    #center-line { display: none; }
    #right-line { display: none; }
    #left-line { width: 100%; }
}

上面的代码呈现: enter image description here

DEMO:http://jsfiddle.net/o39o17tv/7/(重新调整效果窗口)

顺便说一句,如果使用实线,对齐问题变得不那么成问题了:

enter image description here

DEMO:http://jsfiddle.net/o39o17tv/8/

答案 3 :(得分:2)

双倾斜边框

注意建议您使用SVG。

<强> CSS:

  • 一个元素
  • 两个伪元素

使用了大量具有百分比值的calc()来使其完全响应 使用了很多边框式double,因为这似乎是渲染边框的最简单方法 倾斜的一个元素是具有白色背景的绝对定位元素 所以你可能需要有一个纯色背景。

&#13;
&#13;
.extra-border {
  position: relative;
  border-bottom: 11px double black;
  border-top: 3px solid black;
  height: 150px;
  width: 100%;
  box-sizing: border-box;
}
.extra-border::before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 50%;
  height: 15%;
  background-color: white;
  bottom: -11px;
  right: 0;
  border-top: 11px double black;
  border-bottom: 11px solid transparent;
}
.extra-border::after {
  content: "";
  position: absolute;
  display: inline-block;
  background-color: white;
  width: 20px;
  height: calc(20% + 19px);
  border-left: 13px double black;
  right: calc(50% - 11px);
  bottom: -20px;
  transform-origin: center center;
  transform: rotate(45deg);
}
&#13;
<div class="extra-border"></div>
&#13;
&#13;
&#13;