Questions tagged [clip-path]
A CSS property that makes it possible to specify a specific region of an object to display.
clip-path
712
questions
0
votes
1
answer
43
views
HTML and CSS only mask overlay, is it possible?
How to create a CSS-only overlay over images or other HTML elements?
Something like this:
All examples found until now suggest assigning a background and using a mix of either masks or clip-paths ...
- 67
1
vote
2
answers
96
views
Custom rounded shape CSS
I'm trying to draw a custom shape with rounded corners using CSS. Below is an image of what I have so far, but as you can see the rounded corners aren't completely working.
Attempt at custom shape
I'...
- 19
-1
votes
1
answer
68
views
Clip-Path Text Around Quarter Circle (CSS)
I'd like to achieve a text wrapping effect around a quarter circle in the top left corner of a div using CSS clip-path and shape-outside properties.
Currently, my code successfully clips a half circle,...
- 963
3
votes
0
answers
57
views
Clip-path: how to create a circle that paints clockwise?
How can I do an animation where there a circle that is not visible, then a circle paints clockwise like below until the whole circle is visible? The code below works great for 0% - 25% as it smoothly ...
0
votes
1
answer
52
views
Let overlay div become visible through clip-path circle transition / animation
I have two <div>s that fill the entire page. The first div (blue) is shown initially and the second one (yellow) is hidden (display:none). If I click on the blue div, I want to show the yellow ...
- 1,153
2
votes
1
answer
45
views
Grid layout & clip-path help (disappearing middle image)
I'm am currently exploring clip-path. I'm having some trouble with a grid layout and disappearing image.
I have three images in a div called .gallery. I want them to:
Display next to each other ...
0
votes
2
answers
54
views
SVG element won't render within space of another SVG element using clipPath & path
I'm trying to make an SVG element render within another given SVG element using path and clipPath attributes.
Specifically, I'm trying to the character's pupil to render within the player's eyes and ...
1
vote
1
answer
27
views
Clip Path height/objectBoundingBox not working Firefox
I have an effect on my site which uses a clip-path in the form of a wave like so:
<svg class="svg" width="0" height="0" preserveAspectRatio="xMidYMid meet"&...
- 246
0
votes
1
answer
28
views
Using clipPath changes the size of the paths for an SVG
I'm encountering an issue where my SVG shrinks when I apply a clipPath to it. Despite setting the clipPathUnits to userSpaceOnUse to ensure that the clip path coordinates align with the SVG’s viewBox, ...
- 51
0
votes
1
answer
34
views
clip-path change in runtime in Javascript
I am able to change the clipPath property of an element at runtime.
But I am not able to change the property value using a variable incremented in timer.
How to allocate the value of x to these two ...
- 2,759
0
votes
1
answer
62
views
Custom shape with clip-path
div {
position: fixed;
bottom: 0;
background-color: green;
height: 50vh;
width: 100vw;
}
<div></div>
Is it possible to do this kind of shape with clip-path and svg? I ...
- 576
0
votes
1
answer
66
views
Get rounded corner while using a border created with clip-path
I am trying to create the following shape (https://i.sstatic.net/cZmav.png
right now i am using a clip-path to create the border, because of the corner in the bottom-right. however i am having a ...
- 21
0
votes
0
answers
51
views
SVG Clip Mask Over Video Not Displaying in Safari
I successfully created an SVG clip mask using a company logo that is supposed to be used as a mask over a video montage. However, it works in every browser except for Safari. I have scoured this site ...
- 1
0
votes
0
answers
55
views
Image with Clip-path Animated
I'm having issues trying to animate the clip-path while the image remains unmoved.
svg {
transition: 2s;
transform: matrix(3, 2, -2, 3, 0, 0);
}
<div>
<svg version="1.1" id="...
- 4,133
-1
votes
1
answer
118
views
how to make curved from the top Flutter bottom navigation bar
I want to make this curved bottom nav bar in Flutter
but what I'm getting is this
I'm using ClipRRect to do it but it's not what I need, and here is my code
bottomNavigationBar: Container(
...
1
vote
0
answers
46
views
Clip image inside of enclosed letters
I'm trying to clip an image inside of a letter/number (in this case 0).
This can ofcourse be hardcoded with a simple clip path, but this will make responsiveness and text size a lot more complicated ...
1
vote
1
answer
48
views
How to remove unwanted gaps between clip'ed DIVs using clip-path?
I'm trying to build a sort of selection menu in the form of a ring.
For this I use CSS clip-paths.
Cutting out the individual parts works so far, as does arranging the segments via rotation.
However, ...
- 11
0
votes
0
answers
15
views
How to add a border to an element that's using clip-path? [duplicate]
I have an image that's been clipped using the CSS clip-path property, details below -
clip-path: polygon(0 100%, calc(20% - 100px) 100%, 100% calc(100% - 100px), 100% 0%, 0% 0%);
Is it possible to ...
- 81
0
votes
1
answer
910
views
Algorithm to convert SVG path to CSS clip path polygon
I'm experimenting with using SVGs as clip-path.
I know you can pass a url to an SVG path, but I've had issues with it, especially when it comes to consider absolute vs. relative path (to my knowledge, ...
- 651
1
vote
0
answers
59
views
An unexpected CSS error occurs specifically on iPhones
I've been working on a section in the photo on android
where I utilized grid and clip-path, and it looks fantastic on all devices except iPhone's. Interestingly, it functions perfectly on Mac and ...
0
votes
0
answers
21
views
SVG Coordinates not working with % values [duplicate]
I'm using the following SVG code:
<svg viewbox="0 0 100 100" preserveAspectRatio="none" width="100%" height="100%">
<defs>
<clipPath ...
0
votes
0
answers
23
views
I need to create a figure using css. I am using clip path, but cannot make perfect rounded corners. Any ideas how to do it? [duplicate]
[enter image description here](https://i.sstatic.net/7nTun.png)
How to make those figures using css? I have some progress using clip-path (clip-path: polygon(0 6%, 100% 0%, 98% 100%, 0 94%)), but ...
- 1
0
votes
1
answer
76
views
Clip/mask (remove) top-right image corner with SVG
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 ...
- 13
0
votes
1
answer
93
views
Add a circle in the middle of a rectangle [duplicate]
I need to draw this image with CSS only:
I have achieved this:
The problem is removing the box shadow on that particular place. I've tried to cut the circle with a clip-path, but the box shadow ...
1
vote
1
answer
81
views
How to crop the form field
How can I style the form field as shown in the screenshot, with a border, while cropping the top-left and bottom-right corners?
I have tried to use clip-path: polygon(), but it varies on different ...
- 113
0
votes
1
answer
242
views
How to make this notch like design using html, css or tailwindcss
I need to make this design.
I used this clip-path method but the edges is not smooth. how can i achieve the design?
.nav {
width: 14rem;
height: 4rem;
background-color: white;
clip-...
- 72
1
vote
1
answer
43
views
Clip-path doesn't work corectly on web browswers (Mozilla, Edge, Chrome) but works perfectly on preview Visual Code Studio HTML, CSS, JS
I want to create a fancy hero section for my company. I'm using clip-path and some JS to achieve a paint spray effect on mouse move, and it works perfectly in the VCS preview. However, when I try it ...
- 29
0
votes
2
answers
86
views
CSS clip-path to show vertical overflow above a button but not below
I have a button with an image to the left of the text and I would like to mask off the image so that the portion that hangs over the bottom of the button is hidden but the top overflow remains visible....
- 348
0
votes
1
answer
57
views
Background positioned at right with clip-path: path moves to right when animating width from 100% to 0
In my HTML document I have an absolutely positioned element with background color and clip path on its ::before pseudo-element. This element works as a shadow to elements behind it. I want to remove ...
- 65
0
votes
0
answers
29
views
Use SVG mask instead of clip-path transition
I've created a working prototype of what will eventually be a hero banner where
the script cycles through each section
transitions to each section use a expanding shape to reveal the next section
&...
- 43
0
votes
1
answer
141
views
I want the clip path content to be visible outside the clip path area [duplicate]
The content inside the clip-path container is not visible outside the `clip-path region.
I tried applying positioning property to the container. I applied relative positioning to the outer container ...
- 35
0
votes
1
answer
48
views
clipPath doesn't clip the symbol path on SVG rectangle
Expected the rectangle will be clipped by a star on the example below, but it doesn't work.
Current result:
.
Expected result:
Where is the mistake? What did I miss?
Here is the CodePen demo.
<svg
...
- 511
1
vote
1
answer
53
views
Make a clip-path inset a square on any viewport, in JS
Hello here is a codepen that shows my problem
I'm trying to make a JS calculation that changes the clip path inset of a div so that it shows a square.
There's one constraint: the square width has to ...
- 31
1
vote
1
answer
64
views
How do I create the correct clip-path with inversed circles for my image?
I'm building our companies new website, but am running into an issue.
The designer created images like this:
So this bottom right corner. The other corners are all border-radius: 40px;.
I'm trying to ...
-1
votes
1
answer
73
views
Create something like an oval using css [duplicate]
Please tell me, is it possible to create a similar shape/mask using css? I tried using clip-path and border radius, but I didn’t get a similar shape.
Screenshot
I found a way to make such a shape ...
- 1
0
votes
0
answers
81
views
Aspect ratio of polygon-clip path
I have a polygon shape inside the container but the problem is shape has the static width and height of both div . I want to make it responsive and it should take the 80% of the given space with some ...
0
votes
0
answers
38
views
How to make a staircase / step line using svg in reactjs / nextjs?
Hey guys i am very new to svg path animations,
i am trying to re create steps / stair svg path something like below
How do i proceed to make something like this ?
animated as in on scroll it fix ...
- 45
1
vote
2
answers
94
views
Create a circular clippath that is always 300% height of the element ot clip and aligns left
Is a duplicate from this question, which was apparently too vague.
I want to clip elements using a clip-path in CSS, having specific requirements. I've been fiddling with it and reading MDN docs, but ...
- 119
-1
votes
1
answer
90
views
css clip-path property not working when zooming in on ios / safari / iphone
Currently when I have a navigation menu with visibility toggling using the CSS clip-path, but when I zoom in on ios/iphone, the clip-path doesn't work and it's revealing the menu content itself. Is ...
0
votes
0
answers
42
views
Animate SVG clipping mask
I have an SVG which consists of curvy lines. I want to create a clipping mask of this, for a blurred white rectangle, and translate that to make it look like the lines are glowing as the rectangle ...
- 153
0
votes
1
answer
85
views
Use canvas as background for overlaying elements using mask
I have a full-screen background canvas, I want to draw elements on top of that canvas that act as a mask. So the canvas should only be visible through the overlaying elements.
Here's a picture on what ...
- 501
0
votes
1
answer
156
views
How do I make this SVG background use clip path to make it transparent?
I have this svg I found online that I would like to use as a background but I would like to alter it so that the lines created by the are used in a clip-path, making them transparent and showing the ...
- 45
-1
votes
1
answer
64
views
Outside Box-Shadow for ClipPath HTML Button
At the moment I have a background picture which shows single elements for some menu structure. I started to put some transparent buttons over the image to navigate to single pages depends on which ...
- 1
0
votes
2
answers
94
views
Transition of clip path - how to change direction?
I am working with clip-path, and have created a box with a cut-off corner. When hovered, it closes up and becomes a full square. What I am interesting in, is it possible to choose the direction it ...
- 173
0
votes
0
answers
50
views
CSS relative clip-path: path() not working (entire bg image not showing), where is the code issue?
I am building a hero element that I'm trying to make each 'piece' link to a different page, and since there is a lot of overlapping have opted for clip-path instead of masking. Here is an image ...
0
votes
0
answers
162
views
How can I mask a div with a background image? [duplicate]
I am looking to build a container to put some content in. I want to have a little text for the "notch" or the "tab" in the top.
I tried building the same thing with pseudo elements ...
- 23
0
votes
1
answer
1k
views
How to animate an image reveal with GSAP and clip-path in React
I'm trying to animate the reveal of an image using GSAP and the clip-path property in a Component. The animation works as expected when I use the first clip-path value, but when I switch to the other ...
- 41
0
votes
0
answers
202
views
Is it possible to have a CSS backdrop-filter be masked with a gradient and have overflow hidden and border-radius set?
I am struggling to figure out how to get this to work in Chrome (v117.0.5938.92). It works as expected in Safari and Firefox, but it seems as though Chrome just can't handle it. If there are other ...
- 36
0
votes
1
answer
147
views
How to clip image by another image in Konva like fabric.js clipPath it do
How can i clip image by another image?
I need behavoior like in fabric.js clipPath - one image clip another. Main image will be aditable - draggable and scalable, clip image will be static. Main ...
1
vote
0
answers
237
views
CSS Lava Lamp Clip-path
So I am trying to make a "clip-path lava lamp" effect. my body has an animated gradient and a section with a white background. in the section is a lava effect. the lava is red right now but ...
- 41