css 为div制作4个锯齿形边框

qpgpyjmq  于 2022-11-19  发布在  其他
关注(0)|答案(1)|浏览(238)

我如何才能使something like this,但在所有4边的边界(顶部,右侧,左侧,底部)?

kfgdxczn

kfgdxczn1#

.zigzag {
    position: relative;
    padding: 4px 4px 20px 4px;
    background: lightgray;
}

div>div {
  text-align: center;
  height: 200px;
}

.zigzag:after {
    background: linear-gradient(-45deg, #ffffff 16px, transparent 0), linear-gradient(45deg, #ffffff 16px, transparent 0);
    background-position: left-bottom;
    background-repeat: repeat-x;
    background-size: 32px 32px;
    content: " ";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 32px;
}

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

相关问题