CSS-带有阴影的ZigZag右边框

Question

我用阴影制作了一个锯齿形的右边界，我做了一些研究并找出了锯齿形的上边界，我需要在右边度多少度？

   .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/

Answer 1

您可以尝试这个。

.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>