我试图制作一个底部有锯齿形边框的容器,如下所示:
我尝试了这个,但我不知道如何突袭底部的灰色背景,我只想让边框像图像一样灰,任何人都可以帮忙吗? :
https://jsfiddle.net/umw8yh21/1/
HTML:
<div class="myform">
<div class="myformMain">Content</div>
<div class="myformFooter"></div>
</div>
CSS:
.myform{
border: 4px solid lightgrey;
border-bottom: none;
}
.myformMain {
height: 200px;
padding: 36px 0;
box-sizing: border-box;
background-color: white;
}
.myformFooter:after{
content: " ";
display: block;
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 36px;
background: linear-gradient(white 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, white 33.33%) 0 0%;
background: -webkit-linear-gradient(white 0%, transparent 0%), -webkit-linear-gradient(135deg, #d9d9d9 33.33%, transparent 33.33%) 0 0%, #d9d9d9 -webkit-linear-gradient(45deg, #d9d9d9 33.33%, white 33.33%) 0 0%;
background: -o-linear-gradient(white 0%, transparent 0%), -o-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -o-linear-gradient(45deg, #272220 33.33%, white 33.33%) 0 0%;
background: -moz-linear-gradient(white 0%, transparent 0%), -moz-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -moz-linear-gradient(45deg, #272220 33.33%, white 33.33%) 0 0%;
background: -ms-linear-gradient(white 0%, transparent 0%), -ms-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -ms-linear-gradient(45deg, #272220 33.33%, white 33.33%) 0 0%;
background-repeat: repeat-x;
background-size: 0px 47%, 14px 41px, 14px 42px
}
编辑:其他类似的答案并不完全是我想要的,我已经检查过它们,我需要一种方法来使相同大小的边框呈锯齿形,不使用任何svg / png或纹理,只有css。
你可以使用SVG
作为底部重复的背景与non-scaling-stroke
属性集
div {
width: 50%;
height: 180px;
border: 4px #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;
background-size: 10% auto;
background-repeat: repeat-x;
}
<div></div>
只需为stroke-width
的边框宽度和path
属性选择相同的值。
如果你需要用文本填充这个元素,记得在底部添加一些空间(例如使用padding-bottom
),这样内容就不会与行重叠。
另外值得注意的是,vector-effect="non-scaling-stroke"
属性会阻止路径缩放,因此您甚至可以将此背景无缝地应用于响应元素(否则正常边界将保持固定宽度,而SVG
路径将缩放),例如
此外,如果您希望也可以通过在某些给定的媒体查询中更改background-size
来更改zizag的数量,例如
@media all and (min-width: 800px) {
/* 12 background repetitions */
div { background-size: calc(100% / 12) auto }
}
@media all and (min-width: 1200px) {
/* 18 background repetitions */
div { background-size: calc(100% / 18) auto }
}
您可以尝试如下:
.container {
height:150px;
width:320px;
border:3px solid grey;
border-bottom:none;
background:
linear-gradient(135deg,transparent 50%,grey 50%,grey calc(50% + 3px),transparent 0) -13px 100%,
linear-gradient(45deg,transparent 50%, grey 50%,grey calc(50% + 3px),transparent 0) 6px 100%;
background-size:40px 20px;
background-repeat:repeat-x;
}
body {
background:pink;
}
<div class="container">
</div>