1

我正在尝试使用此示例：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 的底部。我将如何解决这个问题？

谢谢

4

2 回答 2

2

您要做的是以绝对方式应用之字形边框，使其粘在底部。

  1. 首先我们需要一个容器，这样带有 tophalf 类的 div 可以调整到 50% 的高度
  2. 其次我们需要申请 position:relative; 到上半部分，所以锯齿形边框会粘在底部
  3. 现在我们可以将 position:relative 替换为 position:absolute; 在你的代码中
  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;
}
于 2013-03-26T01:44:38.850 回答
0

真的很喜欢这个问答。

但是，它只能处理面朝下的曲折。

我在这里为上/右/左/右方向添加 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;
}

这是一个代码笔示例：http ://codepen.io/anon/pen/HjJBF

于 2013-07-06T17:46:00.130 回答