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

你想要做的是以绝对方式应用之字形边框，以便它会粘在底部。

首先我们需要一个容器，所以带有top toplf的div可以调整为高度50％
其次我们需要申请职位：亲属;到tophalf类，所以之字形边框将粘在底部
现在我们可以替换position：relative to position：absolute;在你的代码中
设置底部：-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

ZigZag Border（父％高度）

2 个答案: