在CSS中创建锯齿形三角形边框 [英] Making jagged triangle border in CSS

问题描述

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

I have a shape with an edge like this in Photoshop:

可以将重复的三角形作为CSS的边框吗？

Is it possible to make the repeated triangles as a border with CSS?

推荐答案

您可以使用css3渐变创建zig-zag图案背景，使用之后 css pseudo应用它像边框。

You can use css3 gradients to create a zig-zag patterned background, use the after css pseudo to apply it like a border.

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 Zigzag边框

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

JSFiddle: http://jsfiddle.net/kA4zK/

这篇关于在CSS中创建锯齿形三角形边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！