clip-path

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

由 孤街浪徒 提交于 2019-12-23 02:51:18
问题 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 solution. Chrome Firefox The clip-path is: clip-path: polygon(0 0, 0 100%, 15px 50%); What mystery is this? I also found a similar issue: CSS - Strange border appearing on Chrome mobile with clip-path 回答1: I had a similar (if not the same) issue, I fixed this by adding

Create responsive SVG clip path / Making SVG <path> responsive

由 99封情书 提交于 2019-12-22 13:53:25
问题 I'm trying to create a responsive SVG Clip Path using a <path> SVG element. However, I having trouble getting it to work. I have gotten it to work using more basic shapes such as <circle> , but not the <path> element. I have also gotten it to work using static dimensions with the <path> element. I used the instructions here as a reference: https://www.smashingmagazine.com/2015/05/creating-responsive-shapes-with-clip-path/. I also looked at similar questions on StackOverflow and other examples

Hover events for SVG clip-path with mutiple paths

由 不羁岁月 提交于 2019-12-22 10:27:33
问题 I have an SVG demo image that consist multiple circles that are clipping an animated GIF. Is it possible to watch hover events for each individual circle as the user mouses over them? For example the top-left circle or the middle-right circle. Also is it possible to manipulate color overlay on those circles as they are hovered? EDIT: Ideally I would like the hover to apply a color over the hovered circle and be clickable to take someone to another page. EDIT 2: On hover as well as changing an

Multiple clip-paths

由 有些话、适合烂在心里 提交于 2019-12-22 08:18:29
问题 I'm trying to make a website layout ideally consisting of multiple divs, where I'd like each one to have a slanted bottom, going into the one below. Here's a look at the mockup so far: @charset "utf-8"; /* CSS Document */ * { margin: 0; font-size: 10px; } .red { position: relative; height: 500px; background: red; background-size: cover; background-repeat: no-repeat; background-position: center; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 5vw)); } .blue { height: 500px; margin-top

Create a Reverse Clip-Path - CSS or SVG

由 ☆樱花仙子☆ 提交于 2019-12-21 17:46:39
问题 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 clip a shape it basically punches a hole in the upper most layer and removes the shape, not the background. Is this possible? I'd also be open to an SVG solution, but I am new to SVG so be kind :) Basically, in the code below I have a blue square

Mask image with a triangle at the bottom

由 北城以北 提交于 2019-12-21 05:47:15
问题 I'm trying to figure out how to best mask a div with an angular shape like so--if the top div in this case will be a background image, and both divs would be 100% width: I've seen lots of tutorials out there on how to mask an image with a circle shape, but none on how you would mask the border of a div like the red area. I know there must be a better way than doing this with bitmaps, but am at a loss. Would it be best to do this with clip-path or SVG? I'm not all that concerned about older

clip-path without clipping content

由 喜欢而已 提交于 2019-12-20 04:38:22
问题 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%, 0% 100%); clip-path: polygon(0 57%, 100% 21%, 100% 100%, 0% 100%); background-color: red; } <html> <body> <div class="content"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat doloremque porro modi, aliquam nulla cupiditate voluptatibus similique iusto labore iure voluptatem odit facilis

clip-path does not work with chrome

由 时间秒杀一切 提交于 2019-12-19 06:56:22
问题 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); } <svg> <defs> <clipPath id="clipping"> <circle cx="284" cy="213" r="213" /> </clipPath> </defs> </svg> <img src="http://i.stack.imgur.com/MnWjF.png" width="728" height="482" > 回答1: Webkit does not support applying an SVG clipPath to an html image. If you make the image an SVG image i.e. change

clip-path does not work with chrome

由 不羁岁月 提交于 2019-12-19 06:55:46
问题 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); } <svg> <defs> <clipPath id="clipping"> <circle cx="284" cy="213" r="213" /> </clipPath> </defs> </svg> <img src="http://i.stack.imgur.com/MnWjF.png" width="728" height="482" > 回答1: Webkit does not support applying an SVG clipPath to an html image. If you make the image an SVG image i.e. change

Clip path not displaying properly in SVG sprite when using “use”

由 我与影子孤独终老i 提交于 2019-12-19 04:14:20
问题 I'm trying to hack together a sprite sheet from a set of icons. I know almost nothing about SVG. I can get the simple icons to work, but an icon with a clip path isn't displaying properly. From what I can tell it seems like it's not using the clip path. The sprite works in jsfilddle and it works if I just load the svg on it's own and include a < use > statement in the SVG. But if I have a separate < use > it doesn't work. All my testing has been done in Chrome (50.0.2661.94) <svg xmlns:xlink=
订阅 clip-path