CSS左侧的锯齿形边框 [英] zigzag border in css left side
本文介绍了CSS左侧的锯齿形边框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何将锯齿形边框移到左侧?
.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>
Thx
解决方案
您应该能够更改线性梯度度以实现此目的,并将设置为repeat-y
./p>
.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 to move the zig zag border to the left side?
.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>
Thx
解决方案
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>
这篇关于CSS左侧的锯齿形边框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文