Stack Overflow
Stack Overflow

Questions tagged [clip-path]

A CSS property that makes it possible to specify a specific region of an object to display.

The clip-path property in CSS allows you to specify a specific region of an element to display, rather than showing the complete area. There used to be a clip property, but note that is deprecated.

670 questions
6
votes
1 answer

Can't bind to style.clip-path in angular 4

I have a simple component in Angular 4 that is as follows: HTML
and the only thing I have added to the .ts file is: color = 'green'; shape = 'polygon(50% 0%, 100% 38%, 82%…
Niles Tanner
  • 3,911
  • 2
  • 17
  • 29
6
votes
1 answer

SVG clip-path not working - multiple svgs on same page

I have multiple svgs on one page and have exported them individually from illustrator. I also passed them through omgsvg which reduced the file size. However, when I view the complete page with all of my separate svgs inserted (via my server side…
mwal
  • 2,803
  • 26
  • 34
6
votes
1 answer

How to clip the container by a fixed distance from its right edge?

Just as in Offset a background image from the right using CSS I want to position my shape some absolute value relative to the right edge of the container. clip-path: polygon(0 0, right 1em 0, 100% 50%, right 1em 100%, 0 100%, 0 0); This should cut…
Andy
  • 4,783
  • 2
  • 26
  • 51
6
votes
2 answers

Cut corner on div with image set to 100% height and width

This is basically what i want to achieve --> https://jsfiddle.net/tak1pyt7/1/ .clip { width: 500px; height: 500px; -webkit-clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0); clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0…
Vinay
  • 723
  • 9
  • 32
6
votes
2 answers

Click through transparent image pixel

I don't want the transparent part of the images to be clickable. I found but the coordinates are in pixels and I want to do something responsive. Another problem: I can't find why there is some pixels between the bottom of the first picture…
Skya
  • 61
  • 4
6
votes
2 answers

Clip-path not working on videos

I have been trying to display an image and on hover, a video would start replacing the image, I used Javascript for the hover functions. I did this using "poster" in the video tag like this:`
5
votes
2 answers

how to scale `clip-path: path`?

I have a clip-path, which cuts a certain shape of. The problem is that it is set in absolute coordinates. If I put % there it breaks. How to scale it so that it fits the canvas borders and is stretched together with canvas? .canvas { width:…
klm123
  • 12,105
  • 14
  • 57
  • 95
5
votes
2 answers

Masking - Show div only on top of certain div?

I am trying to create an "eye blink" animation with HTML and CSS. What I would want, is that when the eyes blink, the eyeballs are not showing. As you can see from the code, the eyes consists of 4 elements. Div "eyes" is the container where the…
Tane
  • 481
  • 2
  • 9
  • 20
5
votes
3 answers

Transform CSS clip-path with mixed (fixed and percentage) values to SVG clip-path

I have a card image with gradient with clipped corner using clip-path: .card { width: 200px; height: 200px; background: linear-gradient(to bottom, blue, green); clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px); }
Vadim Ovchinnikov
  • 13,327
  • 5
  • 62
  • 90
5
votes
1 answer

How to cut a circular part from an image?

I am trying to clip my image with an SVG path but my image doesn't seem to fit in well. This is what I am trying to achieve: And this is what i am getting: This is the code I've tried: .topbar-chat-img { width: 48px; height: 48px; …
S.Damian
  • 136
  • 6
5
votes
1 answer

How do I use a stroke as a clipping path in SVG?

I have a path like the following: This shows on my page…
Lucas
  • 16,930
  • 31
  • 110
  • 182
5
votes
1 answer

Clip-path not working with z-index

I am having trouble placing a container on top of another container that uses a clipped-path. I have tried using z-index on either of the containers but it doesn't seem to help. If I remove the clipped-path class from the container then the block…
Breageside
  • 133
  • 1
  • 2
  • 8
5
votes
1 answer

Apply CSS hover just on visible part of a clipped image

.circle { -webkit-clip-path: circle(120px at center); clip-path: circle(120px at center); } .circle:hover { cursor:move; }
Kai Hartmann
  • 3,106
  • 1
  • 31
  • 45
5
votes
2 answers

CSS Clip-path positioning issues

I have created a fairly simple shape using an SVG element which is then put into my CSS using clip-path. It should make the corners rounded for me but for some reason only 1 of the corners does the effect perfectly. This is the shape:
Stewartside
  • 20,378
  • 12
  • 60
  • 81
5
votes
0 answers

clip-path with SVG from external file

I'm playing around with SVG and wanted to see if I could store the SVG in an external file and call on it with url(link), since FireFox doesn't support clip-path when declaring the shape in CSS. However, the clipping doesn't work at all when linking…
Rvervuurt
  • 8,589
  • 8
  • 39
  • 62
1 2
3
…
44 45