blocks|key|203016|text|您可以很容易地使用CSS创建individual+triangle+(只需调整边框属性)。为了让它起作用，你需要自己生成相当多的标记。我建议不要使用这种方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|203017|相反，您最好使用包含单个三角形的单个图像(最好是透明的.png)，然后使用background-image和background-repeat+(repeat-x)属性将其绑定到div+(您的“边框”)。|style|CODE|203018|不幸的是，目前还没有一种直接的方法来使用纯CSS来实现这一点。|203019|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/snippets/css/css-triangle/^0|E|J|0|0|11|G|1I|H|21|8|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@$A|W|B|X|F|G]|$A|Y|B|Z|F|G]|$A|10|B|11|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]]]

<p>You can create an <a href="http://css-tricks.com/snippets/css/css-triangle/" rel="nofollow">individual triangle</a> using CSS quite easily (just tweak border properties). In order for this to work you will need to generate quite a bit of markup yourself. I would recommend against this approach.</p>

<p>Instead you are likely better off using an individual image containing a single triangle (preferably a transparent .png) and then use <code>background-image</code> and <code>background-repeat</code> (<code>repeat-x</code>) properties to bind that to a div (your "border").</p>

<p>Unfortunately there is no yet a straight-forward way to achieve this using pure CSS.</p>


blocks|key|421300|text|在CSS3中有一个边框图像属性。也许你可以用你想要的方式解决它。更多信息请点击此处：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|421301|https://developer.mozilla.org/en-US/docs/Web/CSS/border-image|offset|length|421302|或者在这里|421303|https://www.w3schools.com/cssref/css3_pr_border-image.asp|421304|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|1P|0|0|0|0|1L|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|J|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|C]]|Q|$5|M|N|O|A|$P|I]]]]

<p>There is a border-image property in CSS3.
Maybe you can work it out in a way you want. More here:</p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/border-image</a></p>
<p>Or here</p>
<p><a href="https://www.w3schools.com/cssref/css3_pr_border-image.asp" rel="nofollow noreferrer">https://www.w3schools.com/cssref/css3_pr_border-image.asp</a></p>


blocks|key|203089|text|您可以使用渐变创建Z字形图案的背景，使用::after伪元素将其应用为边框。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|203090|​|203091|.header{
++++color:+white;
++++background-color:+#2B3A48;
++++text-align:+center;
}
.header::after+{
++++content:+"+";
++++display:+block;
++++position:+relative;
++++top:+0px;
++++left:+0px;
++++width:+100%25;
++++height:+36px;
++++background:+linear-gradient(#2B3A48+0%25,+transparent+0%25),+linear-gradient(135deg,+#272220+33.33%25,+transparent+33.33%25)+0+0%25,+#272220+linear-gradient(45deg,+#272220+33.33%25,+#2B3A48+33.33%25)+0+0%25;
++++background-repeat:+repeat-x;
++++background-size:+0px+100%25,+9px+27px,+9px+27px;
}|code-block|syntax|javascript|203092|<div+class="header"><h1>This+is+a+header</h1></div>|203093|203094|来源：CSS+Zigzag+Border+with+a+Textured+Background|203095|JSFiddle：http://jsfiddle.net/kA4zK/|203096|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/q/12031328/1756941|1|http://jsfiddle.net/kA4zK/^0|K|7|0|0|0|0|0|3|18|0|0|9|Q|1|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|19|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1A|8|@]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|R|3|S|5|6|7|1E|8|@]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|T|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]|11|$5|W|X|Y|E|$Z|12]]]]

<p>You can use gradients to create a zig-zag patterned background, use the <code>::after</code> pseud-element to apply it like a border.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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-repeat: repeat-x;
    background-size: 0px 100%, 9px 27px, 9px 27px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header"&gt;&lt;h1&gt;This is a header&lt;/h1&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>Source: <a href="https://stackoverflow.com/q/12031328/1756941">CSS Zigzag Border with a Textured Background</a></p>
<p>JSFiddle: <a href="http://jsfiddle.net/kA4zK/" rel="nofollow noreferrer">http://jsfiddle.net/kA4zK/</a></p>


blocks|key|421349|text|就我个人而言，我认为剪辑路径比复杂的背景渐变更容易处理/理解。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|421350|​|421351|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%25;
++++left:0;
++++right:0;
++++clip-path:polygon(
+++++++0+0,+2.5%25+100%25,+5%25+0,++7.5%25+100%25,+
+++++10%25+0,12.5%25+100%25,15%25+0,+17.5%25+100%25,+
+++++20%25+0,22.5%25+100%25,25%25+0,+27.5%25+100%25,+
+++++30%25+0,32.5%25+100%25,35%25+0,+37.5%25+100%25,+
+++++40%25+0,42.5%25+100%25,45%25+0,+47.5%25+100%25,+
+++++50%25+0,52.5%25+100%25,55%25+0,+57.5%25+100%25,+
+++++60%25+0,62.5%25+100%25,65%25+0,+67.5%25+100%25,+
+++++70%25+0,72.5%25+100%25,75%25+0,+77.5%25+100%25,+
+++++80%25+0,82.5%25+100%25,85%25+0,+87.5%25+100%25,+
+++++90%25+0,92.5%25+100%25,95%25+0,+97.5%25+100%25,+100%25+0);
++}
}|code-block|syntax|javascript|421352|<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>|421353|421354|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Personally, I think clip-path is easier to work with/understand than complex background gradients.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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);
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container jagged-bottom"&gt;
  &lt;h1&gt;Looks Like A Receipt&lt;/h1&gt;
  &lt;p&gt;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.&lt;/p&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I have a shape with an edge like this in Photoshop:</p>

<p><img src="https://i.stack.imgur.com/ckqau.png" alt="image"></p>

<p>Is it possible to make the repeated triangles as a border with CSS?</p>


Making jagged triangle border in CSS

在Photoshop中，我有一个带有边缘的形状：​​有没有可能用CSS将重复的三角形作为边界？

问在CSS中制作锯齿状三角形边框
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在CSS中制作锯齿状三角形边框EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在CSS中制作锯齿状三角形边框
EN