使用CSS绘制带有连接器的文本行

Question

是否可以仅使用CSS绘制此类线？

         This line
 __________|_____________
|                        |
|                        |

或

|                        |
|                        |
└────────────────────────
            |
         This line

我使用简单的文字绘图很糟糕，但在理想情况下我想要这样：

或者像这样

它可以是动态的，取决于指向的div的大小。

为了清楚我的问题：

如果可以使用普通CSS绘制与上面示例相同的行，或者我必须使用图像然后相应地缩放它们？

我想要的最终结果示例：

Answer 1

我认为最简单的方法是使用负边距，但使用绝对定位也会起作用。有很多方法可以达到这个效果。

首先是代码结构：

Content before.
<div class="rectangle">
    <div class="top line"></div>
    Content inside.
    <div class="bottom line"></div>
</div>
Content after.

我将.top.line作为第一个元素，.bottom.line作为最后一个元素，因为我使用了负边距。如果您使用绝对定位，则HTML代码中的展示位置并不重要。

然后你选择一个线长。在这里，我选择20px。由于我不希望我的行与div之前和之后的内容重叠，因此我会向.rectangle添加大量的垂直边距。

.rectangle {
    margin: 20px 0;
    border: 1px dotted black;
}

.line将具有相同样式的右边框，右边框将成为实际线条。您可以通过更改.line的宽度来控制水平位置。在这种情况下，您希望它位于中间，所以50%，如果您希望它更靠右，80%等。

.line {
    border-right: 1px dotted black;
    width: 50%;
    height: 20px;
}

最后，为了将行放出div，您使用负边距。每个边距的值必须等于border-width加padding的{​​{1}}。由于此.rectangle没有填充，.rectangle border-width，我将1添加到1并使用20的边距。

-21px

Obs。：显然，您必须使用.top.line { margin-top: -21px; } .bottom.line { margin-bottom: -21px; } + padding-top作为border-top-width，并使用.top.line的底部等价物。

您可以在此处查看结果：http://jsfiddle.net/QJNHL/

P.S。：我没有任何事可做，这里是＆＃34; set-like＆＃34;效果使用相同的技术发布。 http://jsfiddle.net/34yHs/

Answer 2

是的，您可以使用定位的伪元素上的简单边框来执行此操作：

<p class="bracket">No account needed</p>

.bracket {
    position: relative;
    padding-top: 20px;
    text-align: center;
}

.bracket:before, .bracket:after {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 15px;
    border: 1px dotted gray;
}

.bracket:before {
    bottom: 100%;
    border-width: 0 1px 1px 1px;
}

.bracket:after {
    top: 0;
    left: 50%;
    width: 0;
    border-width: 0 1px 0 0;
}

演示：http://jsfiddle.net/feeela/BVLx2/3/

Answer 3

这是另一个使用圆角的版本：http://jsfiddle.net/jwuB3/1/。

HTML：

<div class = "bracket">No Account Needed</div>

CSS：

.bracket {
    margin-top: 50px;
    position: relative;
    width: 301px;
    text-align: center;
    font: 10px/1 Sans-Serif;
}

.bracket:before {
    content: "";
    position: absolute;
    left: 0;
    top: -22px;
    width: 100%;
    height: 10px;
    border: 1px dotted #aaa;
    border-top-width: 0px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.bracket:after {
    content: "";
    position: absolute;
    left: 50%;
    top: -12px;
    height: 10px;
    border-left: 1px dotted #aaa;
}