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
0
votes
0 answers

animation of morphing svg clippath path

spent some hours to achieve the following and after another several hours of troubleshooting and searching i thought maybe some genius among you has a solution for my problem (: as the title says i'd like to animate a svg clippath by changing the…
dmkscr
  • 25
  • 1
  • 7
0
votes
1 answer

Radial Gradient Clippath

I'm wanting to use a clip path to expose an image behind another image. Im using an svg circle element. The result I want is for a soft, gradient edge, instead of a hard edge supplied by the clipPath. Is this possible? I know that I can do it with…
SMDev
  • 85
  • 2
  • 10
0
votes
1 answer

Does clip-path work on chrome?

Does Chrome currently support using polygon on clip-path? -webkit-clip-path: polygon(0 73%, 0 27%, 100% 16%, 100% 88%); clip-path: polygon(0 73%, 0 27%, 100% 16%, 100% 88%); I can get inset to work (see commented out code) but not polygon. Demo of…
cataloupe
  • 21
  • 1
  • 5
-1
votes
2 answers

how to make a diagonal border (top and left)

image description here I need to make a div like this. I made it in clip-path, but the problem is that I have to insert the content into div (some text) that came out of div barrier, if anyone has a solution how to get a diagonal border (top, left),…
Uros
  • 1
  • 3
-1
votes
2 answers

How to create an irregular shape for images using css?

Is it possible to create an irregular shape for images with CSS like in this url? As a starter point I made this but I do not manage to make more irregularities appear on each side of the image, as in the example url mentioned above: .div img…
Liviu
  • 11
  • 1
  • 5
-1
votes
1 answer

Customize the container shape

How to achieve following shape in flutter without using plugins? I want to implement the customized container using clippath. I'm trying to use lineTo() method. I did not get exactly this one.
maheswari
  • 21
  • 3
-1
votes
1 answer

Clippingmask from text and its parent div

I've seen a few people ask this question, but it's always closed and redirected to a similar question (that is different). The question is: How do you make a clipping mask from text and the closest parent div of the text element? Not to confuse with…
imbatman
  • 3
  • 3
-1
votes
2 answers

Is there any way to add a border to a clip path css?

I'm struggling to replicate the button style as in the image below. I've tried using clip path but I'm not getting the desired effect where there is a visible border and a semitransparent background. Is there a simple workaround for…
Geordy Oliver
  • 23
  • 4
-1
votes
1 answer

Cutting image corners with CSS clip-path with a fixed angle

i want to cut my image corners by 45 degrees like the image below with clip-path,i want values by percentage, I just need values for clip-path, #div img:first-child { clip-path: polygon(100% 0%, 0% 0%, 9.52% 98.91%, 89.95% 100%); }
fardad
  • 29
  • 1
  • 9
-1
votes
1 answer

Edge/IE problems with clip-path

creating a web site with a circular rotating menu, it works great on Chrome, Firefox, and Opera, but got some problem with Edge and IE. The main thing is that Edge/IE is not supporting clip-path, so do you guys know some workaround for this, every…
Bojan Vasilevski
  • 1
  • 3
-1
votes
1 answer

Text reveal masking on scroll: how to get clip-path: inset() work on IE and Edge

The following CSS code doesn't work in IE and Edge but working fine in Chrome and Safari and on iOS. A demo is available here: https://new-css-clip-text-reveal-mask.webflow.io/ Any thoughts how to get it work in IE and Edge? .text-holder…
Philipp Roth
  • 63
  • 8
-1
votes
1 answer

Can I access the click event in a polygon wrapped in a clipPath

When I wrap my polygons in a clipPath tag, I cannot access their click event.
QuestionOne
  • 23
  • 4
-1
votes
1 answer

React production build differs from development | polyfill does not run

I've run npx create-react-app . and imported clip-path manually. Development build works without a problem, but the production one doesn't seem to work. Issue is the same on IE11 and Edge44 Steps to reproduce: npx create-react-app . add "ie 11" to…
Dawid
  • 585
  • 5
  • 26
-1
votes
1 answer

How to cut the background color at the bottom right corner of the text

I have issues in cutting the background color at the bottom right corner of the text. is there anyone who can help me ? I manage to make it in Javascript but due to span problem in every word my boss didnt accept my solution so im hoping that…
Pham
  • 29
  • 6
-1
votes
1 answer

CSS Curve over background image

I have been given this design by my designer and I have no idea how the best way to tackle the curves both above and below the image. I've considered clip-path but cannot figure out how to curve it. I don't want to use images if I can help it.
Llanilek
  • 3,386
  • 5
  • 39
  • 65
1 2 3
…
44
45