如何将此锯齿形边框移动到左侧而不是底部？

Question

我的元素底部有锯齿形边框。我怎样才能把它移到左边的边框呢？

.zigzag {
    height: 150px;
    width: 400px;
    background: linear-gradient(-135deg, #e8117f 5px, transparent 0) 0 5px, linear-gradient(135deg, #e8117f 5px, #fff 0) 0 5px;
    background-color: #e8117f;
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 10px 10px;
}

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

Answer 1

您应该可以更改 linear-gradient 度数来实现这一点，和将 background-repeat 设置为 repeat-y。

  .zigzag {
    height: 150px;
    width: 400px;
    background: linear-gradient(-137deg, #e8117f 6px, transparent 0) 0 5px, linear-gradient(320deg, #e8117f 5px, #fff 0) 0 5px;
    background-color: #e8117f;
    background-position: left bottom;
    background-repeat: repeat-y;
    background-size: 10px 10px;
 }

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

如何将此锯齿形边框移动到左侧而不是底部？

How can I move this zigzag border to the left side instead of the bottom?

html

css

border