如何将这个锯齿形边框移到左侧而不是底部? [英] How can I move this zigzag border to the left side instead of the bottom?

问题描述

我的元素底部有一个锯齿形边框.如何将其移动到左侧边框?

I have a zig zag border on the bottom of my element. How can I move it to the border of the left side, instead?

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

推荐答案

您应该能够更改线性梯度度以实现此目的，并设置 background-repeat 改为 repeat-y .

You should be able to change the linear-gradient degrees to achieve this, and set background-repeat to 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>

这篇关于如何将这个锯齿形边框移到左侧而不是底部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！