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を適用する必要があります。ジグザグの境界線が下にくっつくように、tophalfクラスに
  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;
}

これがcodepenの例です：http：//codepen.io/anon/pen/HjJBF

于 2013-07-06T17:46:00.130 に答える