制作在CSS锯齿状三角形边界(Making jagged triangle border in CS

我有一个在Photoshop这样的边缘形状：

是否有可能使重复的三角形与CSS边界？

Answer 1:

您可以使用CSS3渐变来创建一个Z字形图案的背景，使用after CSS伪应用它就像一个边界。

HTML：

<div class="header"><h1>This is a header</h1></div>

CSS：

.header{
color:white;
background-color:#2B3A48;
text-align:center;
}
.header:after {
content: " ";
    display:block;
    position: relative;
top:0px;left:0px;
    width:100%;
    height:36px;
    background: linear-gradient(#2B3A48 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background: -webkit-linear-gradient(#2B3A48 0%, transparent 0%), -webkit-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -webkit-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background: -o-linear-gradient(#2B3A48 0%, transparent 0%), -o-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -o-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background: -moz-linear-gradient(#2B3A48 0%, transparent 0%), -moz-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -moz-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background-repeat: repeat-x;
    background-size: 0px 100%, 9px 27px, 9px 27px;
    }

来源： CSS锯齿边框与纹理背景

的jsfiddle： http://jsfiddle.net/kA4zK/

Answer 2:

对于未来的观众，我发现这个改编@ extramaster的回答是有点简单。

它本质上是相同的，但它使用一个较少的背景梯度，并允许支持对象（ .navbar在我的标记）通过硬编码的第二种颜色为锯齿形的，而不是展现。

的jsfiddle： http://jsfiddle.net/861gjx0b/2/

HTML：

<div class="header"><h1>This is a header</h1></div>
<nav class="navbar"></nav>

CSS：

.header{
      position:relative;
      color:white;
      background-color:#2B3A48;
      text-align:center;
}

.navbar {
      background: #272220;
      height:20px;
}    

.header:after {
  content: "";
  position: absolute;      
  display: block;

  height: 10px;
  bottom: -10px; /* -height */
  left:0;
  right:0;

  /* TODO Add browser prefixes */
  background:
    linear-gradient(
      45deg, transparent 33.333%,
      #2B3A48 33.333%, #2B3A48 66.667%,
      transparent 66.667%
    ),linear-gradient(
      -45deg, transparent 33.333%,
      #2B3A48 33.333%, #2B3A48 66.667%,
      transparent 66.667%
    );

    background-size: 8px 20px; /* toothSize doubleHeight */
    background-position: 0 -10px; /* horizontalOffset -height */
}

Answer 3:

您可以创建一个单独的三角使用CSS很容易（只调整边框属性）。 为了使这个工作，你将需要产生相当多的标记自己。 我不推荐这种方法。

相反，你可能会关闭使用含有一个三角形（最好是透明的PNG），然后使用单独的图像更好的background-image和background-repeat （ repeat-x ）特性结合，为一个div（您的“边界”）。

不幸的是没有还没有实现这一使用纯CSS一个直接的方式。

Answer 4:

有一个在CSS3边框-image属性。 也许你可以解决它在你想要的方式。 这里更多http://www.w3schools.com/cssref/css3_pr_border-image.asp

Answer 5:

就个人而言，我觉得夹路径是更容易使用/明白不是复杂的背景梯度。

 body { font-family:Roboto,'Open Sans',Helvetica,sans-serif; } .container { background:#ddd; margin:0 auto; max-width:800px; padding:30px; } h1:first-child {margin:0;} .jagged-bottom { position:relative; } .jagged-bottom:after { background:#ddd; content:""; height:2vw; position:absolute; top:100%; left:0; right:0; clip-path:polygon( 0 0, 2.5% 100%, 5% 0, 7.5% 100%, 10% 0,12.5% 100%,15% 0, 17.5% 100%, 20% 0,22.5% 100%,25% 0, 27.5% 100%, 30% 0,32.5% 100%,35% 0, 37.5% 100%, 40% 0,42.5% 100%,45% 0, 47.5% 100%, 50% 0,52.5% 100%,55% 0, 57.5% 100%, 60% 0,62.5% 100%,65% 0, 67.5% 100%, 70% 0,72.5% 100%,75% 0, 77.5% 100%, 80% 0,82.5% 100%,85% 0, 87.5% 100%, 90% 0,92.5% 100%,95% 0, 97.5% 100%, 100% 0); } } 

 <div class="container jagged-bottom"> <h1>Looks Like A Receipt</h1> <p>Simply adjust the clip path on the pseudo-element if you want more or fewer spikes, and the height if you want them to be taller or shorter.</p> </div> 

文章来源: Making jagged triangle border in CSS