Создать декоративвные линии

[aaron]

Подскажите, как можно создать в шаблоне такие линии. Кроме border-right и border-bottom мне ничего в голову не приходит.

http://savepic.su/2342060.htm

Edited August 17, 2012 by aaron

[gritsyuk]

Для горизонтальной линии логичней применить тег <hr> задав ему соответствующий стиль. Вертикальная линия - border-right, зачем что-то выдумывать

см. здесь

Edited August 17, 2012 by gritsyuk

[LittlePony]

А ничего другого и не надо, это бордерами и делается.

[aaron]

А ничего другого и не надо, это бордерами и делается.

У меня затруднение в другом. На макете видно, что линия короче, чем будущий бокс. Поэтому и задал вопрос.

border-bottom:width,style,color;

И все...

Или сделать линию, как на макете, не получиться? Только на всю ширину/высоту будущего бокса с постом?

Для этой части макета сделал такую разметку:

http://jsfiddle.net/GVHSoDHREgZotPCz8CJv/CHCjE/

Edited August 17, 2012 by aaron

[mrnobody]

Можно попробовать сделать через box-shadow, но это плохой вариант (

[aaron]

Можно попробовать сделать через box-shadow, но это плохой вариант (

Мне тоже так кажется (

[Sensei]

Можно прибегнуть к помощи псевдоэлементов.

Например так http://jsfiddle.net/sensei/C9Leb/

Edited August 17, 2012 by Sensei

[aaron]

Можно прибегнуть к помощи псевдоэлементов.

Например так http://jsfiddle.net/sensei/C9Leb/

Классно! Работает ))

Только, насколько я понимаю, с таким методом будут проблемы по части кроссбраузерности?

И вопрос.

Правильно ли я понял этот код:

div:after { ... }

После блока создается псевдоблок с абсолютным позиционированием, для которого устанавливаются координаты left,top,bottom (благодаря двум последним он "ужимается") и для этого блока создается только левая граница border-left со свойствами?

Если так, то не совсем понятно, почему при положительных значениях left этот псевдоблок "залезает" внутрь простого блока. А при отрицательных - отодвигается от него.

Для простого блока ставил специально outline и смотрел, куда перемещается псевдоблок...

Edited August 17, 2012 by aaron

[Sensei]

По части кроссбраузерности, для ie 6 и 7 версии можно эмулировать посредством экспрешенов.

top и bottom не ужимают, а скорее растягивают, так как мы не указали высоту.

Почитайте про позиционирование http://www.css-tricks.ru/Articles/Details/CSSPositioning

[SelenIT]

После блока создается псевдоблок с абсолютным позиционированием...

* После содержимого блока (но внутри блока!) создается псевдоблок с абсолютным позиционированием... и далее по тексту.

[aaron]

top и bottom не ужимают, а скорее растягивают, так как мы не указали высоту.

Понятно. )