Question

如何制作边框为底部的“ zigzag”，如下面的屏幕快照所示？

如您在屏幕截图中所见-主背景为白色，而div的背景也为白色。我尝试过这种方式（无法正常工作）：

after {
        background: linear-gradient(-45deg, rgba(221, 221, 221, 0.4) 15px, transparent 0), linear-gradient(45deg, rgba(221, 221, 221, 0.4) 15px, transparent 0);
        background-position: left-bottom;
        background-repeat: repeat-x;
        background-size: 35px 35px;
        content: " ";
        display: block;
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 32px; 
}

Answer 1

这就是您要尝试做的，您需要将SVG的概念用于背景图像，

引用：Container with zigzag border at bottom only apply to the border

div {
      width: 50%;
      height: 280px;
      border: 1px #ededed solid;
      border-bottom: 0;
      background-image: url('data:image/svg+xml;utf8, <svg viewBox="0 0 200 110" xmlns="http://www.w3.org/2000/svg"><path d="M -15 110 L100 10 L215 110" fill="none" stroke="%23ededed" stroke-width="4" vector-effect="non-scaling-stroke"/></svg>');
      background-position: bottom left;
/*     box-shadow: 0 8px 6px -6px black; */
      background-size: 10% auto;
      background-repeat: repeat-x;
    }

<div></div>

带框阴影的div的ZigZag底部边框

1 个答案: