Clip-path css doens't render ?
See original GitHub issueHi,
I’m using various image genretated by CSS with some clip path such as:
.rec.one{
position: absolute;
float:left;
-webkit-clip-path: polygon(0 0, 27% 26%, 27% 100%, 0% 100%);
clip-path: polygon(0 0, 27% 26%, 27% 100%, 0% 100%);
}
<div class="rec one">
<img src="pattern/purple.jpg" height="500">
</div>
The problem I’m having is when i render the canvas as an img, it render the full image ( not masked anymore via the clip path)
Is there anyway to make this work by any chance ? It would be incredible !
Thanks a lot!
Issue Analytics
- State:
- Created 7 years ago
- Reactions:3
- Comments:6
Top Results From Across the Web
Why doesn't CSS clip-path with SVG work in Safari?
I am using css clip-path to 'clip' out the svg animation with the image below. I have it working great in firefox and...
Read more >clip-path - CSS-Tricks
The clip-path property in CSS allows you to specify a specific region of an element to display, with the rest being hidden (or...
Read more >[Solved] CSS Clip-path using SVG Polygons doesn't work well ...
Step #3: Go to your child theme style. css file or Appearance >> Customize >> Additional CSS and paste the code. Please replace...
Read more >Understanding Clip Path in CSS - Ahmad Shadeed
The clip-path property creates a clipping region where content within it is visible, and content outside it is invisible. Here is a basic ......
Read more >Animated clip-path not rendering correctly in safari - GSAP
Yeah, that's unrelated to GSAP - Safari just doesn't render things ... the master bug report for this CSS clip-path bug for webkit...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
is this actually resolved or not sorry?
Use dom-to-image instead https://github.com/tsayen/dom-to-image
It allows save image from DOM elements with clip-path css property.