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

How to round out corners when using CSS clip-path

I want to be able to round out the 3 leftmost corners on this shape that I have created, any idea how that can be done? div { position: absolute; z-index: 1; width: 423px; height: 90px; background-color: #b0102d; color: white; …
Eduardo Hernandez
  • 469
  • 1
  • 5
  • 11
34
votes
4 answers

Is it possible to have multiple masks with clip-path?

Hi, I wonder whether it's possible to use more than one mask on the same element, just like this: clip-path:polygon(8% 0%, 8% 7%, 14% 12%), polygon(96.4%, 92% 96.4%, 97% 92.3%), polygon(97% 15%, 99% 13%, 99% 0%); With this I would be able to show…
Cain Nuke
  • 2,843
  • 5
  • 42
  • 65
30
votes
4 answers

Create a Reverse Clip-Path - CSS or SVG

I'm trying to create what is in essence the reverse of a CSS clip-path. When using clip-path, an image or div is clipped so that only the shape you specify remains and the rest of the background is effectively deleted. I would like it so that if I…
pjk_ok
  • 618
  • 7
  • 35
  • 90
20
votes
7 answers

Clip path inset circle?

Is it possible to create an inset circle clip path so that the clip path would effectively cut a hole through the div in the center opposed to only showing the center? The div should all be shown apart from a hole cut out in the center to create…
Rafty
  • 653
  • 2
  • 8
  • 23
20
votes
1 answer

Responsive clip-path with inline SVG

On an element with a background (image or solid color don't really matter):
I am trying to apply a clip-path using SVG. To achieve this, I am putting SVG inline into the same element like this:
spliter
  • 12,321
  • 4
  • 33
  • 36
17
votes
3 answers

Prevent CSS clip-path from clipping children?

Is there any way to prevent clip-path from clipping its children? For example, consider the following code: .el { width: 300px; height: 300px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background-color:…
jonas23
  • 213
  • 3
  • 7
17
votes
3 answers

How to make clip-path work on Microsoft Edge?

While making a clipped header for Firefox and Microsoft Edge(ME), I used clip-path. It works in Firefox just by putting clipPath element inside an SVG element and a clip-path style inside the HTML element. When I open this same code on ME, it…
Kenny Amaro
  • 473
  • 1
  • 3
  • 14
17
votes
1 answer

Clip-Path Inset in CSS not working in chrome

I'm trying to use the CSS property clip-path, but I get an Invalid property value error in Chrome. Here's a small demo: .clip-me { clip-path: inset(0px 50px 50px 0px); /* top, right, bottom, left */ }
KyleMit
  • 30,350
  • 66
  • 462
  • 664
11
votes
3 answers

How to use SVG clipPathUnits="objectBoundingBox"

I'm trying to use an SVG to mask an image.
emersonthis
  • 32,822
  • 59
  • 210
  • 375
11
votes
2 answers

d3.js brush fill color histogram

i have created some histogram with d3.js. I managed to change fill color of rect depending on the position of the brush. But i would like to change the color inside a rect. For example if the brush start is in the middle of the rect i would like…
Christophe D.
  • 1,089
  • 11
  • 21
11
votes
1 answer

How to resize SVG clip-path?

I am using an SVG as a mask for an image and I'm trying to resize it. I tried indicating the width & height (to 100) but it still doesn't scale. Just remains the same size. Codepen Demo This is the SVG code: …
catandmouse
  • 11,309
  • 23
  • 92
  • 150
11
votes
4 answers

Clip-path doesn't work in firefox [% values]

I am trying to run svg clip-path in mozilla but it doesn't work. .mask-1 { -webkit-clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%); clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%); } It works in chrome perfectly. Can anyone…
user4821826
  • 129
  • 1
  • 1
  • 6
10
votes
2 answers

How to resize the ClipPath area of SVG?

I have such code: .img-container { width: 300px; height: 300px; background-color: lightgreen; overflow: hidden; } .clipped-img { clip-path: url('#header-clip-svg'); }
Natalia Davydova
  • 728
  • 7
  • 22
10
votes
3 answers

Stacking circles produces a black bar on border radius

I have quite the puzzling enterprise here. I'm building a mouse which serves as a 'torch / searchlight'. All text (inline elements, buttons, you get the point) gets inverted from the usual white to black if there is a hover happening on it, the…
roberrrt-s
  • 7,914
  • 2
  • 46
  • 57
10
votes
2 answers

Alternative to Clip-Path with universal browser support?

I've used a few clip-path polygon shapes to create downward pointing content boxes on my site, you can see a few examples on the home page here: http://550.9f2.myftpupload.com/ and this is the CSS I'm using: .bottom_arrow { -webkit-clip-path:…
AndrewCoCo
  • 153
  • 1
  • 2
  • 12
1
2 3
…
44 45