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
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
54
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 ...
