How to place zigzag edge on an image using css?

Question

I would like to add a zig-zag edge transparent for images on my website.

In this image I made a mere demo in Photoshop:

Note: the pink border of the image I want it to be transparent.

For now this is my code:

.tawcvs-swatches .swatch {

    -webkit-border-radius: 10%;
    -moz-border-radius: 10%;
    border-radius: 10%;


    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 35px;
    text-align: center;     
    margin-right: 15px
    cursor: pointer;
    /* border: 3px solid transparent; */
    border: 3px solid transparent;
    position: relative;
    opacity: 1;
}

Answer 1

Face this is a bit laborious, because you kind of need some "magic numbers" (numbers on fixed px), because only so you can precisely adjust this picture.

What I’m going to do is a gradient of that type over the image that will repeat itself in the X and Y, where I’ll wear position, repeat and size to control Picote. Imagine that these two "triangles" will be repeated by the axes X and Y giving the impression of total Picote as you will see below...

To do this I used a series of gradients in 45°, actually not in 45° full-time (-45, 135, 225...), but angles that always cut a square in X from one vertex to the other. Also, I needed to use background-position, and size and repeat to control the position, direction and size of these picotes. Vale resaltar I created all this gradient in one pseudo-element ::after in the container tagged img within.

Follow the final result with the code referring to the images above. Only here I put the color of the gradient equal to the chord of the background that is white, giving the impression of the transparent Picote.

.tawcvs-swatches.swatch {
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 35px;
    text-align: center;
    margin-right: 15px;
    cursor: pointer;
    border: 3px solid transparent;
    position: relative;
    opacity: 1;
}
.swatch::after {
    content: "";
    background-image: 
        linear-gradient(135deg, #fff 0px, #fff 10px, transparent 10px),
        linear-gradient(-135deg, #fff 0px, #fff 10px, transparent 10px),
        linear-gradient(45deg, #fff 0px, #fff 10px, transparent 10px),
        linear-gradient(-45deg, #fff 0px, #fff 10px, transparent 10px),
        linear-gradient(45deg, #fff 0px, #fff 10px, transparent 10px),
        linear-gradient(135deg, #fff 0px, #fff 10px, transparent 10px),
        linear-gradient(-45deg, #fff 0px, #fff 10px, transparent 10px),
        linear-gradient(225deg, #fff 0px, #fff 10px, transparent 10px);
    background-position: 
        0 -5px, 
        10px -5px, 
        0 45px, 
        10px 45px,
        -5px 0px,
        -5px 0px,
        45px 0px,
        45px 0px;
    background-size: 
        10px 20px,
        10px 20px,
        10px 20px,
        10px 20px,
        20px 10px,
        20px 10px,
        20px 10px,
        20px 10px;
    background-repeat:
        repeat-x,
        repeat-x,
        repeat-x,
        repeat-x,
        repeat-y,
        repeat-y,
        repeat-y,
        repeat-y;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

/* para abrir a trama do picote ajustei a posição dos gradiente mais para fora*/
.swatch:nth-child(2):after {
    background-position: 
        0px -9px,
        10px -9px,
        0 49px,
        10px 49px,
        -9px 0px,
        -9px 0px,
        49px 0px,
        49px 0px;
}
    

<div class="tawcvs-swatches swatch">
    <img src="https://fillmurray.com/60/60">
</div>

<div class="tawcvs-swatches swatch">
    <img src="https://fillmurray.com/60/60">
</div>

Answer 2

"- NOTE: The pink border of the image I want it to be transparent."

What you want is usually called a mask!

An alternative is to use an SVG. And as much as the alternative of @hugocsl, takes a little work!

---

First, we have to literally draw the mask that we’re going to apply to the image.

My recommendation is that you use Adobe Illustrator. Precisely because he already hands us the SVG code practically ready - by the way, the part we need already comes ready...

I won’t go into too much detail on that part. I’ll just demonstrate how to abstract the SVG "path" with Illustrator:

With the "path" in hand, we go to the codes:

  body {
      margin:0;
  }
  .clip-svg {
      width: 128px;
      height: 128px;
      -webkit-clip-path: url(#myClip);
      clip-path: url(#myClip);
  }

<html>
    <body>

        <img src="https://i.imgur.com/XUR1o5Q.png" class="clip-svg">

        <svg width="0" height="0">
            <defs>
                <clipPath id="myClip">
                    <polygon points="128,36 121,29 128,22 121,15 128,8 121,1 121,1 120,0 113,7 106,0 99,7 92,0 85,7 78,0 71,7 64,0 57,7 50,0 43,7
                        36,0 29,7 22,0 15,7 8,0 7,1 1,7 0,8 7,15 0,22 7,29 0,36 7,43 0,50 7,57 0,64 7,71 0,78 7,85 0,92 7,99 0,106 7,113 0,120 7,127
                        7,127 8,128 15,121 22,128 29,121 36,128 43,121 50,128 57,121 64,128 71,121 78,128 85,121 92,128 99,121 106,128 113,121
                        120,128 127,121 127,121 128,120 121,113 128,106 121,99 128,92 121,85 128,78 121,71 128,64 121,57 128,50 121,43  "/>
                </clipPath>
            </defs>
        </svg>

    </body>
</html>

Please note that we do not use SVG completely. Only clipPath, through his ID: myClip. Therefore, in the CSS, link that ID on the property clip-path.

Look at the structure of the SVG:

<svg width="0" height="0">
    <defs>
        <clipPath id="myClip">
            <!-- aqui entra o path vindo do SVG pelo Illustrator -->
        </clipPath>
    </defs>
</svg>

Despite being an excellent resource, it has a lot of problems regarding compatibility. Check on Caniuse.

This ruse and more is in CSS-TRICKS - Clipping and Masking in CSS (in English, but easy to interpret).

---

All material of this answer is available in my Github/lipespry.