Сделайте верхнюю и нижнюю границу divs неровным краем

0

Какой был бы лучший подход для создания такой границы на div? Это должно было бы работать только в современных браузерах и ничто ниже IE10. Я искал использование изображения границы, но, похоже, это немного не так, как бы оно отображало нижнюю границу и как она растягивается по ширине div. Используя повторяющееся фоновое изображение, я не думаю, что это сработает, так как высота контейнера может расти. Спасибо за любую помощь! Изображение 174551

Теги:

1 ответ

3
Лучший ответ

Проверьте этот jsfiddle, который работает во всех браузерах

РЕДАКТИРОВАТЬ

http://jsfiddle.net/yKPe9/3/

.header:after, .footer:after {
    content: " ";
    display:block;
    position: relative;
    top:0px;
    left:0px;
    width:100%;
    height:36px;
    background: linear-gradient(#2B3A48 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background: -webkit-linear-gradient(#2B3A48 0%, transparent 0%), -webkit-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -webkit-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background: -o-linear-gradient(#2B3A48 0%, transparent 0%), -o-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -o-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background: -moz-linear-gradient(#2B3A48 0%, transparent 0%), -moz-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -moz-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
        background: -ms-linear-gradient(#2B3A48 0%, transparent 0%), -ms-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -ms-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background-repeat: repeat-x;
    background-size: 0px 100%, 9px 27px, 9px 27px;
}

.main
{
    height:200px;
    padding: 36px 0;
    box-sizing:border-box;
   background-color:#2B3A48; 
}
.flip-vertical {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-filter: flipv; /*IE*/
    filter: flipv; /*IE*/
}
  • 0
    Как вы заставите это работать на всех границах?
  • 0
    К сожалению, это не работает в IE10.
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню