Горизонтальная полоска со стрелкой средствами CSS

Всем привет, возможно сделать такую картинку:

средствами CSS, которая отображалась бы так же даже при изменении ширины?

Ответ

http://jsfiddle.net/ab4Se/
body { background: #fff; } .block { border-bottom: 1px solid #f00; position: relative; background: #fff; margin-bottom: 50px; } .block::after, .block::before { content:''; position: absolute; left: 50%; bottom: -10px; margin-left: -10px; background: #fff; width: 20px; height: 20px; box-shadow: 1px 1px 0 #f00; /* Добавляем тень для уголка */ z-index: -1; /* Прячем за основным блоком */ transform: rotate(45deg); /* Поворачиваем на 45º */ -webkit-transform: rotate(45deg); } .block::before { z-index: 1; /* Накладываем поверх, чтобы скрыть следы тени */ box-shadow: none; /* Прячем тень */ } .block1 { border-bottom: 1px solid #00f; position: relative; background: #fff; } .block1::after, .block1::before { content:''; position: absolute; left: 50%; bottom: -10px; margin-left: -10px; background: #fff; width: 20px; height: 20px; box-shadow: 1px 1px 0 #00f; /* Добавляем тень для уголка */ z-index: -1; /* Прячем за основным блоком */ transform: rotate(45deg); /* Поворачиваем на 45º */ -webkit-transform: rotate(45deg); } .block1::before { z-index: 1; /* Накладываем поверх, чтобы скрыть следы тени */ box-shadow: none; /* Прячем тень */ }