is it possible to create a zig-zagged edge with a bevel effect using pure css?-CodePudding

So, I'm trying to create a zig-zag edge on an element with an inner bevel on the edges, as in this image here. currently i am managing it by using a border image, but i'd like to know if it's possible with pure css, because the person i am making this site for wants to be able to easily change the color of the element in question, and having a border image makes it not so easy.

i found this tool to create a zig-zag edge using masks (https://css-generators.com/custom-borders/) and that works great, but because it's a mask, i cant add any inset box-shadows to it, which is how i would normally do a bevel. i tried wrapping the element in a parent div and applying a drop-shadow filter to the parent, but unfortunately it seems that the drop shadow filter doesnt allow for inset shadows the way box shadow does.

is there any way to achieve this with pure css, or should i stick to the border-image, and just teach them how to change the color of the png?

CodePudding user response：

The best way would be to use an SVG image, which is still plain text, easy to edit, and can be styled with CSS. You could even embed the image in the CSS, like so:

border-image: url("data:image/svg xml;charset=utf-8,<SVG goes here>");

CodePudding user response：

I would use that tool for the masking part then add a gradient coloration. Change the red/blue colors like you want and adjust the right 10px to control the depth:

.box {
  --s: 60px; /* control the size */
  
  height: 400px;
  background:
    conic-gradient(from -135deg at right 10px top 50%,#0000 90deg,red 0 225deg,blue 0) 50%/100% var(--s),
    purple;
    
 /* from the generator */
  --mask: conic-gradient(from -135deg at right,#0000,#000 1deg 89deg,#0000 90deg) 50%/100% var(--s);
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

<div ></div>