CODEWITHSUNDEEP
css
Ali
Ali

Reputation: 10453

Draw line with connector to text using CSS

Is it possible to draw this kind of line using CSS only?

         This line
 __________|_____________
|                        |
|                        |

or

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

I'm terrible at drawing using simple text but in picture ideally I want this to be like this:

enter image description here

Or like this

enter image description here

It can be dynamic depend on the size of the div that is pointing to.

Just to be clear to my question:

If this is possible to draw the same line as example above using plain CSS or I have to use image then scale them accordingly?

Example of final result that I want:

enter image description here

Upvotes: 4

Views: 3048

Answers (3)

DRD
DRD

Reputation: 5813

Here's another version that uses rounded corners: 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;
}

Upvotes: 1

OdraEncoded
OdraEncoded

Reputation: 3134

I think the simplest way to do that is using negative margins, but using absolute positioning would work too. There are many ways to achieve this effect.

First the structure the code:

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

I placed the .top.line as the first element and the .bottom.line as the last element because I'm using negative margins. If you used absolute positioning the placement in the HTML code wouldn't matter.

Then you pick a line length. Here I'll pick 20px. Since I wouldn't want my line overlapping with the content before and after the div, I'll add that much of a vertical margin to the .rectangle.

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

The .line will have a right border with the same style, that right border is going to be the actual line. You can control the horizontal position by changing the width of the .line. In this case you want it on the middle, so 50%, if you wanted it to be more to the right, 80% etc.

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

Finally, in order to put the line out of the div, you use negative margins. The value of each margin must be equal the border-widthplus the padding of the .rectangle. Since this .rectangle has no padding but a border-width of 1, I add 1 to 20 and use a margin of -21px.

.top.line { margin-top: -21px; }
.bottom.line { margin-bottom: -21px; }

Obs.: Obviously you have to use padding-top + border-top-width for the .top.line and the bottom equivalents for the .bottom.line.

You can see the result here: http://jsfiddle.net/QJNHL/

P.S.: I have nothing to do so here is the "set-like" effect posted using the same technique. http://jsfiddle.net/34yHs/

Upvotes: 1

feeela
feeela

Reputation: 29932

Yes you can do so using simple borders on positioned pseudo elements:

<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;
}

Demo: http://jsfiddle.net/feeela/BVLx2/3/

Upvotes: 1

Related Questions