ZigZag Border (родительская% высота)

Question

Я пытаюсь использовать этот пример: http://dabblet.com/gist/3401493, который говорит, чтобы использовать это для границы:

.tophalf:after { 
    content: " "; 
    display:block; 
    position: relative; 
    width: 240px; 
    bottom:-30px; 
    height:30px; 
    outline:1px solid red; 
    background: linear-gradient(-45deg, transparent 75%, white 75%) 0 50%, 
       linear-gradient(45deg, transparent 75%, white 75%) 0 50%; 
    background-repeat: repeat-x; 
    background-size:30px 30px, 30px 30px; 
} 

Однако моя верхняя половина имеет высоту в процентах 50%, так что границы не имеет нижней части div. Как я могу это исправить?

Thankyou

Answer 1

То, что вы хотите сделать, это применить зигзаг границу абсолютным способом, так что будет прилипать к дну.

1. Сначала нужно контейнер так DIV с классом tophalf может приспособиться к высоте 50%
2. , во-вторых, мы должны применять положение: относительная; к классу tophalf, поэтому граница зигзага будет прилипать к основанию
3. Теперь мы можем заменить положение: относительно положения: абсолютное; в коде
4. Установите нижнюю: -30px в 0px

Я настроил пример: http://jsfiddle.net/rym6p/2/

HTML-:

<div class="container"> 
    <div class="tophalf"> 
    </div> 
</div> 

CSS-код:

body{background:green;} 
.container{height:480px;} 
.tophalf{background:blue; height:50%; width:240px; position:relative;} 

.tophalf:after { 
    content: " "; 
    display: block; 
    position: absolute; 
    width: 240px; 
    bottom: 0; 
    height: 30px; 
    outline: 1px solid red; 
    background: -webkit-linear-gradient(135deg, transparent 75%, white 75%) 0    50%, -webkit-linear-gradient(45deg, transparent 75%, white 75%) 0 50%; 
    background-repeat: repeat-x; 
    background-size: 30px 30px, 30px 30px; 
} 

Answer 2

очень понравился этот вопрос и ответ.

Однако он управляет зигзагами только вниз.

Я добавляю здесь решения SCSS для направлений вверх/вправо/влево/вправо.

Надеюсь, это будет полезно для других.

@mixin zigzag_downward($color){ 
    background: linear-gradient(45deg, transparent 75%, $color 75%) 0 50%, 
    linear-gradient(-45deg, transparent 75%, $color 75%) 0 50%; 
    background-repeat: repeat-x; 
    background-size:30px 30px, 30px 30px; 
} 

@mixin zigzag_upward($color){ 
    background: linear-gradient(45deg, $color 25%, transparent 25%) 0 50%, 
    linear-gradient(-45deg, $color 25%, transparent 25%) 0 50%; 
    background-repeat: repeat-x; 
    background-size:30px 30px, 30px 30px; 
} 

@mixin zigzag_left($color){ 
    background: linear-gradient(45deg, transparent 75%, $color 75%) 0% 0, 
    linear-gradient(135deg, transparent 75%, $color 75%) 0% 0%; 
    background-repeat: repeat-y; 
    background-size:30px 30px, 30px 30px; 
} 

@mixin zigzag_right($color){ 
    background: linear-gradient(45deg, $color 25%, transparent 25%) 0% 0, 
    linear-gradient(135deg, $color 25%, transparent 25%) 0% 0%; 
    background-repeat: repeat-y; 
    background-size:30px 30px, 30px 30px; 
} 

Вот codepen пример: http://codepen.io/anon/pen/HjJBF