clip-path Questions
4
Solved
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...
7
Solved
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...
Continent asked 3/5, 2016 at 9:34
3
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 t...
Perutz asked 26/7, 2018 at 15:49
3
Solved
I have a web page in which I am using an SVG clip path applied to one of the page's HTML elements.
SVG element:
<svg height="0" width="0">
<defs>
<clipPath id="clip">
<pa...
Siddon asked 24/4, 2015 at 6:35
2
Solved
This is first time I use SVG to make transparent areas on thr picture(marked red) and probably I have very naive question, I wrote this code according to this answer and all elements are closed wit...
4
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%)...
3
I'm trying to use an SVG to mask an image.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width=500 height=300>
<defs>
<clipPath id="clip">
<path d="M2.16,1.363h23....
2
Solved
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 stret...
2
Solved
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-shad...
4
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%, ...
1
Solved
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 ...
2
Solved
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 bru...
Gyn asked 5/8, 2016 at 9:0
7
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...
Woolf asked 1/8, 2015 at 19:20
2
Solved
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 no...
Gemmell asked 11/10, 2020 at 0:44
3
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% 7...
2
Solved
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: u...
2
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 ...
2
Solved
Css property clip-path is work fine but mask or -webkit-mask is not working properly in this example.
Please help me to solve this because my project is totally depended on masking image with svg...
2
Solved
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="img...
2
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 ...
Shifty asked 20/2, 2020 at 15:35
3
Solved
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 ...
Carotid asked 13/9, 2016 at 19:37
1
Solved
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;
border: 2px solid blac...
2
Solved
I know how to animate a clip-path defined directly in CSS, but I don't understand how to do it when the clip-path is referenced from an SVG clipPath element.
I have been experimenting with simple ...
Nolitta asked 22/10, 2019 at 2:1
2
I don't want the transparent part of the images to be clickable.
I found <map> but the coordinates are in pixels and I want to do something responsive.
Another problem: I can't find why ther...
Diatonic asked 9/8, 2015 at 22:47
1
Solved
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 o...
1 Next >
© 2022 - 2025 — McMap. All rights reserved.