I have a fixed element at the top of my page, a vector logo. Further down the page, I have a large vector element. They are both the same colour. When the logo passes over the second element, I want ...

I am trying to achieve one shape(like below). I have taken the shape code from https://css-shape.com/inverted-radius/ But, the problem I am facing is with the border, I need to add border to my shape,...

I have an image that has a -webkit-mask applied to it, and I need to apply a border to the resulting shape. Unfortunately, the mask breaks the border. How do I apply a border around the entirety of ...

The mask-image or the mask-mode is not working on Safari. (working version) chrome: (not working) safari: The code below is from an answer submitted by user "herrstrietzel" in a previous ...

this is the code: <div class="mask1"> <video id="slowMotionVideo" width="700" loop autoplay muted> <source src="flames-video.mp4" ...

I use SVG for backgroundclipping. It is very nice, except on a very long container. If the container is too long, the edges will become jagged. Is there a reason and solution for this? It must be a ...

I try to create a HTML/CSS/JS funnel graph, with a simple front-end structure, in order to do so, I place funnel segments as a flex row: document.addEventListener( 'DOMContentLoaded', function() { ...

I figured that if I have a mask with a black area and a white area, then the pixels corresponding to the black area become transparent, while those corresponding to the white area stay opaque. Except ...

I'm trying to create a block with a smooth, curved cut-out in the top-right corner, similar to the image below: Currently, my implementation looks like this: As you can see, the current curve is not ...

I have multiple images that I'd love to have the exact same size of an corner cut-out (like of you were to fold a corner of a page). I've tried using polygon(), but when an image isn't the same ...

Is it possible to make a div border masked in a specific place like in the picture above? Some kind of div masks another div without setting a background-color (because the background of a whole site ...

Using this generator I can create the wavy border I'm after on either the top and bottom or left and right, but I'm having trouble combining these masks to create a wavy border all the way around. Top ...

I am working on a project that has a contact-us button. This button requires a status indication. I've read the following article that shows a status indication on a avatar image. The cool thing about ...

I'm doing some custom coding in Squarespace. I am having a strange thing happen that I've never seen before. I am trying to add a hard-stop gradient mask to a div (textbox) so that I can create a wavy ...

Is there a (Cross browser (no IE)) way to clip the top right corner of an dynamically sized image with this svg? In the worst case, I can use a fixed aspect ratio, but I prefer it to be as flexible as ...