Questions tagged [clip-path]
A CSS property that makes it possible to specify a specific region of an object to display.
clip-path
82
questions
11
votes
2
answers
3k
views
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');
}
<div class="...
- 748
53
votes
7
answers
138k
views
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: ...
8
votes
1
answer
2k
views
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 ...
- 9,468
21
votes
1
answer
28k
views
Responsive clip-path with inline SVG
On an element with a background (image or solid color don't really matter):
<header id="block-header"></header>
I am trying to apply a clip-path using SVG. To achieve this, I am putting ...
- 12.5k
5
votes
1
answer
1k
views
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:
....
- 146
20
votes
7
answers
18k
views
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 ...
- 683
8
votes
2
answers
6k
views
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 ...
- 11.9k
6
votes
1
answer
2k
views
How can I 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%...
- 28.6k
18
votes
3
answers
9k
views
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% ...
- 223
2
votes
1
answer
415
views
clip-path without clipping content
I am trying to create a shaped background using clip-path but i dont want to clip the children/content of that div.
Here is the code
div{
-webkit-clip-path: polygon(0 57%, 100% 21%, 100% 100%,...
- 1,434
35
votes
4
answers
47k
views
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 ...
- 828
4
votes
1
answer
1k
views
clip-path:circle() radius doesn't seem to be calculated correctly
It's been bugging me for a while whenever I try to use the CSS circle() function to do some clipping as in:
.red {
width: 200px;
height: 300px;
background: red;
...
- 2,486
3
votes
2
answers
3k
views
Invert colored text related background
I want to invert text color based on the background of the text, like in this image: .
So I've tried the following code, but it didn't work:
#warp,
#text,
#tri {
position: absolute;
top: 0;
...
- 35
3
votes
1
answer
3k
views
Complex SVG clip-path responsive
I'm trying to take a complex path shape and apply it as a clip-path mask in css, but I can't figure out how to get the clip mask to "fill" the parent container.
Rather it just gets cut off or doesn't ...
- 634
12
votes
3
answers
5k
views
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 ...
- 558