Блог

Возможно ли нарисовать такую линию, используя только CSS?

          This line
 __________|_____________
|                        |
|                        |
  

или

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

Я ужасно рисую, используя простой текст, но в идеале я хочу, чтобы на картинке это было так:

Или вот так

Это может быть динамическим, зависит от размера div, на который указывает.

Просто чтобы прояснить мой вопрос:

Если это возможно, нарисовать ту же линию, что и в примере выше, используя обычный CSS, или я должен использовать изображение, а затем масштабировать их соответствующим образом?

Пример конечного результата, который я хочу:

Да, вы можете сделать это, используя простые границы для позиционированных псевдоэлементов:

 <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

Я думаю, что самый простой способ сделать это — использовать отрицательные поля, но использование абсолютного позиционирования тоже сработало бы. Есть много способов добиться этого эффекта.

Сначала структурируйте код:

 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 .rectangle . Поскольку в этом .rectangle нет отступов, кроме border-width of 1 , я добавляю 1 к 20 и использую поле -21px .

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

Obs.: Очевидно, что вы должны использовать padding-top border-top-width для .top.line и нижние эквиваленты для .bottom.line .

Вы можете увидеть результат здесь:http://jsfiddle.net/QJNHL

PS: Мне нечего делать, поэтому вот эффект «set-like», созданный с использованием той же техники. http://jsfiddle.net/34yHs

Вот еще одна версия, которая использует закругленные углы: 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;
}