0

画像と div の間にジグザグの境界線がある新しい Web サイトをたくさん見てきました。画像を新しいタブで開くとジグザグがないので、CSS3かHTML5で作成したものです。それがどのように行われるか知っている人はいますか？

ここではいくつかの例を示します。

それらがロードされるのを待ちます。

4

2 に答える 2

1

ジグザグの境界線は次を使用して作成されますlinear-gradient

  • 50% はぼかしです
  • 315度は右側の回転
  • 45deg は左側の回転です
  • 背景サイズは、三角形の幅と配置です

div {
  width: 100%;
  height: 50px;
  background-size: 25px 120%;
  background-image: linear-gradient(315deg, red 50%, rgba(0, 0, 0, 0) 50%), 
                    linear-gradient(45deg, red 50%, black 50%);
}
<div></div>

deg値を変更して回転角度を変更することもできます

div {
  width: 100%;
  height: 50px;
  background-size: 25px 150%;
  background-image: linear-gradient(297deg, red 50%, rgba(0, 0, 0, 0) 50%), 
                    linear-gradient(63deg, red 50%, black 50%);
}
<div></div>

于 2015-04-04T12:01:29.790 に答える
1

1 つ目は反復可能な背景画像で構築され、2 つ目は :before 疑似要素で構築されます。

.ss-style-top::before {
  position: absolute;
  content: '';
  left: 0;
  width: 100%;
  height: 30px;
  background-size: 25px 100%;
  top: 0;
  background-image: linear-gradient(315deg, #FFF 50%, transparent 50%), 
  linear-gradient(45deg, #FFF 50%, transparent 50%);
  margin-top: -30px;
  z-index: 100;
}

最初の例の背景画像のリンクは次のとおりです: http://www.cssvillain.com/hungry/images/assets/parallax-bottom-alt.png

于 2015-04-04T11:57:41.190 に答える