0

How can I make border-bottom "zigzag" but with box-shadow as on the screenshot below?

div with zigzag

As you can see on the screenshot - the main background is white and div's background is also white. I tried this way(which doesn't work like I need):

after {
        background: linear-gradient(-45deg, rgba(221, 221, 221, 0.4) 15px, transparent 0), linear-gradient(45deg, rgba(221, 221, 221, 0.4) 15px, transparent 0);
        background-position: left-bottom;
        background-repeat: repeat-x;
        background-size: 35px 35px;
        content: " ";
        display: block;
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 32px; 
}
JunDev
  • 33
  • 6
  • possible duplicate of: https://stackoverflow.com/q/21515886/8620333 – Temani Afif Jul 01 '20 at 14:38
  • @TemaniAfif How does my question duplicate that one? – JunDev Jul 01 '20 at 14:40
  • did you read it and check the different code there? – Temani Afif Jul 01 '20 at 14:41
  • I did and not find an answer for my case. If you watch the screenshot you'd see that there is a white background and the `box-shadow` of `div` used not for border itself. Those are main issues - white back for both main page and my block and box-shadow. – JunDev Jul 01 '20 at 14:45
  • If you want the `box-shadow` to pop out from underneath (basically, have the zig-zag actually affect the shape of the `div`), it's possible that they're using a CSS clip-path alongside `filter: drop-shadow()` instead of an actual `box-shadow`. Clip-path support [can be pretty hit-or-miss](https://caniuse.com/#feat=css-clip-path), though. This is just a hunch, I could be very wrong. – matthew-e-brown Jul 01 '20 at 15:14

1 Answers1

-1

Is this what you are trying to do, you need to use the concept of SVG for the background image,

refer : Container with zigzag border at bottom only apply to the border

div {
      width: 50%;
      height: 280px;
      border: 1px #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;
/*     box-shadow: 0 8px 6px -6px black; */
      background-size: 10% auto;
      background-repeat: repeat-x;
    }
<div></div>
VR7
  • 112
  • 3
  • 16