This question already has an answer here:
zigzag border in css left side [closed]
                                
                                    (1个答案)
                                
                        
                                在8个月前关闭。
            
                    
我用阴影制作了一个锯齿形的右边界,我进行了一些研究,找出了锯齿形的上边界,在右侧需要多少角度?



   .zigzag {
      position: relative;
      width: 100%;
      height: 200px;
      -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.8) 0px 1px 2px);
       background: #ff7300;
    }
    .zigzag:before {
      content: "";
      display: block;
      position: absolute;
      top: -10px;
      width: 100%;
      height: 10px;
      background:
        linear-gradient(
          45deg, transparent 33.333%,
          #ff7300 33.333%, #ff7300 66.667%,
          transparent 66.667%
        ),
        linear-gradient(
          -45deg, transparent 33.333%,
          #ff7300 33.333%, #ff7300 66.667%,
          transparent 66.667%
        );
      background-size: 20px 40px;
    }

<div class="zigzag"></div>





https://jsfiddle.net/8m2kopqg/

最佳答案

你可以试试这个。



.zigzag {
    height: 200px;
    width: 100%;
    background: linear-gradient(150deg, #ff7300 6px, transparent 0) 0 5px, linear-gradient(-330deg, #ff7300 5px, #fff 0) 0 5px;
    background-color: #ff7300;
    background-position: right bottom;
    background-repeat: repeat-y;
    background-size: 10px 10px;
 }

<div class="zigzag"></div>

07-24 09:44
查看更多