底部有锯齿形边框的容器仅适用于边框 [英] Container with zigzag border at bottom only apply to the border

问题描述

我试图制作一个底部有锯齿形边框的容器，如下所示:

我试过了，但我不知道如何获取底部灰色背景的突袭，我只希望边框像图像一样是灰色的，有人可以帮忙吗?:

此外，如果您希望也可以通过更改某些给定媒体查询的 background-size 来更改 zizag 的数量，例如

@media all and (min-width: 800px) {/* 12 次背景重复 */div {背景大小:计算(100％/12)自动}}@media all and (min-width: 1200px) {/* 18 次背景重复 */div {背景尺寸:计算(100％/18)自动}}

I trying to make a container which have zigzag border at bottom like below :

I tried this but I don't know how get raid of that bottom gray background, I only want the border to be gray like the image, anyone can help on this? :

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
}

EDIT : Other similar answer is not exactlly what I looking for, I already checked them, I need a way to make the border with same size to be in zigzag shape, not using any svg/png or texture for it, only css.

解决方案

You could use SVG as a bottom-repeated background with the non-scaling-stroke property set

    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>

Just pick the same value for both the border width and the stroke-width attribute of the path.

If you need to fill this element with text remember to add some room at the bottom (e.g. using a padding-bottom) so the content doesn't overlap the line.

Also it's worth noting that the attribute vector-effect="non-scaling-stroke"will prevent the path to scale so you could seamlessly apply this background even to a responsive element (otherwise the normal border would keep the fixed width, while the SVG path would scale) e.g.

Codepen demo

Furthermore if you wish you could also change the amount of zizag by changing the background-size at some given mediaquery, e.g.

@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 }
}

这篇关于底部有锯齿形边框的容器仅适用于边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！