鋸齒狀邊界（父％的高度）

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的底部。我將如何去解決這個問題？

三江源

Answer 1

你想要做的是應用鋸齒形邊框以絕對方式，因此將堅持底部。

1. 首先，我們需要一個容器中，以便與類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