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如何制作曲折边框？

回答

相关问题