用CSS制作锯齿状三角形边框?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (249)

在Photoshop中,我有一个边缘形状:

是否可以将重复的三角形作为CSS的边框?

提问于
用户回答回答于

可以使用CSS 3渐变创建一个锯齿形图案背景,使用afterCSS伪类使之就像一个边框。

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;
    }
用户回答回答于

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 */
}

扫码关注云+社区

领取腾讯云代金券