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
10
votes
1 answer

How to Apply a Clipping Path to a DIV Container

I'm attempting to build a kind of progress bar, similar to what Chris Coyier does here: https://css-tricks.com/css3-progress-bars/, except that I want to apply a SVG clipping path to the surrounding div element. For example, I want to apply a SVG…
Ryan
  • 314
  • 1
  • 3
  • 12
9
votes
1 answer

Wrap text content inside a clip path polygon(triangle) shape and image clipped on other half

Im trying to achieve something like this I need to display some text and an image in two halves like shown in the above image. Tried to use clip-path ,but the text content is not wrapped and have issues with alignment too. My…
Yashwanth Kata
  • 817
  • 8
  • 21
9
votes
2 answers

How can I obtain any custom shape using clip-path css propery?

I am trying to obtain the shape using clip-path polygon property and it's not working as expected the shape I want to make is given below I tried the following code but it is giving the corners not round shape ` #header { width: 100%; height:…
Hasnain Ali
  • 133
  • 5
9
votes
3 answers

Clip-path on Chrome leaves a strange line on the edge

I use clip-path to create the particular shape of the blue search button. From Chrome you see a strange line at the cutout edge, while from Firefox everything is OK. I am not the first to point this out, but I have not found a…
Federico Liva
  • 418
  • 1
  • 6
  • 19
9
votes
1 answer

How to add a border to a clipped image?

I am able to clip the image with ClipPath but how can I add a border to that clipped image as following?
Figen Güngör
  • 12,169
  • 14
  • 66
  • 108
8
votes
1 answer

clip-path width doesn't 100% width

Hello, I'm using slick slider and I want to clip-path the container but the clip-path doesn't work well.. this is my svg path
Ampersanda
  • 2,016
  • 3
  • 21
  • 36
8
votes
4 answers

How to use clip-path polygons in FF and IOS

I try to write a little plugin, to open modal boxes in a more organic fashion, therefore I have decided to animate the clip-path property. Now this code only works in chrome: http://codepen.io/meodai/pen/GgGzYo?editors=011 It looks like firefox does…
meo
  • 30,872
  • 17
  • 87
  • 123
7
votes
2 answers

black and white text based on background image with css

I am trying to achieve this effect of a black and white text on a bi-colored header which is always white on a side, and with a background image on the other side (of different colors). this is the css used for this example, which works only…
valerio0999
  • 11,458
  • 7
  • 28
  • 56
7
votes
1 answer

How to Rotate Clip Path without rotating image?

I have an image with CSS property clip-path. I have added animation to rotate the clip path. I want to only rotate clip-path, not the image. From below code, you can get an idea of what I want to achieve. I did this to give you an idea of what I…
Arsalan Khattak
  • 768
  • 2
  • 8
  • 16
7
votes
4 answers

How do I make text in div lower opacity in HTML

How do I lower the opacity of text in div, like so:
Jonathan Ivgi
  • 777
  • 1
  • 5
  • 10
7
votes
2 answers

Why does svg referencing an element with clip-path not work?

When implementing an SVG sprite, an element is created and svg elements are referenced via the element. The containing element is then hidden using style="display: none;" The clip-Path attribute does not render, but the path does.…
Betsy Dupuis
  • 513
  • 1
  • 6
  • 21
7
votes
2 answers

clip-path does not work with chrome

I have problem with clip-path in Chrome. Firefox has no problem and shows this html page correctly, but chrome doesn't show anything. img { -webkit-clip-path: url(#clipping); clip-path: url(#clipping); } …
Saman Mohamadi
  • 4,454
  • 4
  • 38
  • 58
6
votes
2 answers

Creating inverted border radius and box-shadow together

I want to create an inverted border radius similar to: However, it is being hard to create it due to the box-shadow. I have tried many solutions, such use box-shadow inset, or the filter drop-shadow with clip-path without good results. I am on this…
SnakeDrak
  • 3,406
  • 4
  • 28
  • 41
6
votes
1 answer

Why does clip-path (and other properties) affect the stacking order (z-index) of elements later in DOM?

This has been asked before, but only where z-index is explictly defined in the CSS. I am trying to use clip-path on a heading, but then pull up an image from within an element beneath this back over the top of that header. However, as soon as I…
EvilDr
  • 8,943
  • 14
  • 73
  • 133
6
votes
1 answer

How to create CSS breadcrumbs with clip-path?

I'm trying to make a breadcrumbs path using clip-path. #clip span { padding: 3px 20px; background-color: #666; color: white; display: inline-block; clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%); }
Déjà vu
  • 28,223
  • 6
  • 72
  • 100
1
2
3
…
44 45