Html 在中间创建一条CSS双边界线

我正试图通过严格的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{
  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;
}

---

任何链接或共享的知识将不胜感激。我现在似乎找不到这方面的任何东西。我也不想在这里添加一些阴影，这就是为什么你会在那里找到一些

框阴影

代码，但还没有达到100%。

我在上面放了一个响应示例，两个容器使用50%的宽度。这些可以相应地改变。不幸的是，在响应环境中，除了像素的精确宽度之外，任何东西都会导致线条倾斜部分的宽度发生变化，我相信您已经发现了这一点

#形状1:之前{
位置：绝对位置；
底部：38.5px；
左：-10px；
内容：''；
高度：15px；
宽度：100%；
边框底部：3.5px实心#000000；
右边框：4.5px实心#000000；
变换：倾斜（-45度）；
背景色：白色；
}
#形状一：之后{
位置：绝对位置；
内容：''；
底部：33px；
左：-10px；
高度：16px；
宽度：100%；
边框底部：3.5px实心#000000；
右边框：4.5px实心#000000；
变换：倾斜（-45度）；
z指数：-1；
背景色：白色；
}
#形状1{
位置：相对位置；
身高：79.5px；
宽度：50%；
z指数：-1；
}
#形状：以前{
位置：绝对位置；
内容：''；
右：0px；
宽度：50%；
顶部：31.2px；
z指数：-1；
边框底部：3px实心#000000；
盒影：1px2p5pRGBA（0,0,0,3）；
}
#形状：后{
位置：绝对位置；
内容：''；
顶部：36px；
宽度：50%；
z指数：-1；
右：0px；
边框底部：3px实心#000000；
盒影：1px3px5pxRGBA（0,0,0,3）；
}
#形状{
高度：71px；
宽度：50%；
}

---

我不确定CSS是实现这一点的最佳方式。就我个人而言，如果我想显示您正在显示的连接双线，我会使用。但抛开这些，这里有一个简单的CSS解决方案

此方法使用CSS边框、相对定位、变换和内联块。它还具有响应性（沿x轴）

让所有三条线路顺利连接并非易事（如您所述）。由于对齐所需的精度，您可能需要调整几个值才能在您的站点上工作。不确定这一切是否值得，但如果图像格式不是一个选项，我希望这会有所帮助

HTML

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

上面的代码表示：

演示：（重新调整窗口大小以获得效果）

顺便说一句，如果使用实线，对齐问题就不会那么麻烦了：

---

演示：

使用CSS转换：

为了使用CSS实现双边界，而不需要任何问题来正确对齐，倾斜变换是最好的选择，因为我们可以始终修复变换发生的点（从而消除对齐的任何潜在问题）。但是，我们不能在这种方法中使用

double

border，因为倾斜变换会导致有角度的边上的边界线看起来比顶部和底部的边界线更接近。为了克服这个问题，我们必须使用额外的子元素

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

。双外边框{
位置：相对位置；
边框顶部：1px实心；
高度：100px；
宽度：100%；
溢出：隐藏；
}
.双重外边界：在，
.双重外边界：之后，
.双内边框：在，
.双内边框：后{
位置：绝对位置；
内容：''；
高度：20px；
底部：0px；
宽度：50%；
变换：倾斜（-45度）；
}
.双外框：前{
左：-2px；
}
.双外框：后{
右：-2px；
}
.双内边框：前{
左：-4px；
底部：4px；
}
.双内边框：后{
右：0px；
底部：4px；
}
.双重外边界：在，
.双内边框：前{
边框底部：3倍实心；
右边框：4px实心；
变换原点：右下角；
}
.双重外边界：之后，
.双内边框：后{
边框顶部：3倍实心；
左边框：4px实心；
变换原点：左下角；
盒影：插入2px2p2pRGBA（0,0,0,3）；
}

一些内容

双斜边框 注意建议为此使用SVG

CSS:

• 一个元素
• 两个伪元素

使用了大量带有百分比值的

calc（）

，以使其完全响应。
使用了很多边框样式

double

，因为这似乎是渲染边框的最简单方法。
倾斜的一个元素是带有白色背景的绝对定位元素。
所以你可能需要一个纯色背景

。额外边框{
位置：相对位置；
底边：11px双黑；
边框顶部：3件纯黑；
高度：150像素；
宽度：100%；
框大小：边框框；
}
.额外边界：：之前{
内容：“；
位置：绝对位置；
显示：内联块；
宽度：50%；
身高：15%；
背景色：白色；
底部：-11px；
右：0；
边框顶部：11px双黑；
边框底部：11px实心透明；
}
.额外边界：：之后{
内容：“；
位置：绝对位置；
显示：内联块；
背景色：白色；
宽度：20px；
高度：计算（20%+19px）；
左边框：13px双黑；
右：计算（50%-11px）；
底部：-20px；
变换原点：中心；
变换：旋转（45度）；
}

---

嘿，巴德，我从来没有抽出时间说谢谢！我最终使用了您提供的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%; }
}