我试着做一个底部有锯齿状边缘的容器,如下所示:
我试过这个,但我不知道怎么得到那个底部灰色背景的突袭,我只希望边界像图像一样是灰色的,有人能帮忙吗?:
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。