CSS3如何製作曲折邊框？

我已經看到很多新的網站在圖像和div之間有鋸齒邊框。當您在新選項卡中打開圖像時，曲折不在那裏，所以它是使用CSS3或HTML5創建的。有誰知道它是如何完成的？CSS3如何製作曲折邊框？

下面是一些例子：

恨不得加載。

2015-04-04 byrass

鋸齒形的邊界由使用linear-gradient

50％的模糊
315deg是rotatio右側
45deg的n是左側的旋轉
背景大小是三角形的寬度和位置

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-04 12:01:29

爲什麼315deg？ – byrass 2015-04-04 12:03:38

@eagleCDK或-45deg;一樣的 – vals 2015-04-04 14:36:12

首先一個是建立與可重複的背景圖像，和謝勝利一個與：僞元件之前：

.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-04 11:57:41 Danko

CSS3如何製作曲折邊框？

回答

相關問題