clip-path | 易学教程

CSS breadcrumbs with clip-path - need of “negative” coordinates

阅读更多关于 CSS breadcrumbs with clip-path - need of “negative” coordinates

问题 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%); } <div id="clip"> <span>hello</span><span>tiny</span><span>world</span><span>welcome!</span> </div> which gives While I like the simplicity of that method, the problem comes from the coordinates 90% , which are relative to the length of the word. Thus "welcome!" does not have

How to Rotate Clip Path without rotating image?

阅读更多关于 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 want to achieve. The problem with my code is that it takes a lot of time of manually set clip-path points on each keyframe. So Is there any short method to achieve the below code result without changing the points manually on keyframes? I want it to

How to make clip-path work on Microsoft Edge?

阅读更多关于 How to make clip-path work on Microsoft Edge?

问题 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 element. When I open this same code on ME, it doesn't show anything. html,body,header { margin:0px; height:100%; font-family: Arial Unicode MS; } button:hover { transition:background-color 0.5s linear; } a:hover,li:hover { opacity: 0.5; transition:opacity 0.4s linear } #header { width: auto; height

SVG <clipPath> fit container and use % unit

阅读更多关于 SVG fit container and use % unit

问题 So I've been trying to make a waving animation for some text in a different color, for that I'm using <clipPath> and -webkit-clip-path . The .holder div contains two elements on top of one another with the same text, one in white, one in grey, and the clip-path is applied to the later. The problem is that I need the <path> coordinates to be proportional to the text's size. Here is a fiddle demo. I've tried setting a viewBox="0 0 100 100" , it doesn't work. I've also tried using clipPathUnits=

How to apply SVG clipPath to HTML element that is not in the top left corner of document in webkit browsers

阅读更多关于 How to apply SVG clipPath to HTML element that is not in the top left corner of document in webkit browsers

问题 I have defined an SVG clipPath and am applying it to a few DIVs on my page. It works/displays as expected in FF, but in Chrome and Safari (all latest versions), it seems that the clipPath will only affect an HTML element if the HTML element is positioned in the top-left corner of the page. SVG Object <svg height="0" width="0"> <defs> <clipPath id="clip"> <path fill="#000000" d="M0,0.01c3.472,1.088,6.688,3.663,7.878,9.208c1.604,7.482,4.305,11.862,7.102,11.79v0.003 c0.007,0.001,0.014-0.001,0.02

Prevent CSS clip-path from clipping children?

阅读更多关于 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% 75%, 50% 100%, 0% 75%, 0% 25%); background-color: orangered; } h1 { position: relative; z-index: 100; } <div class="el"> <h1>Work Hard, Play Hard</h1> </div> Codepen 回答1: why won't you keep the h1 tag outside the div tag to make it visible <!DOCTYPE html> <html> <head> <style> .el { width: 300px; height: 300px;

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

阅读更多关于 Create responsive SVG clip path / Making SVG responsive

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, but they mostly deal with basic shapes and not the path variable. The SVG shape I'm using is a

Hover events for SVG clip-path with mutiple paths

阅读更多关于 Hover events for SVG clip-path with mutiple paths

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 overlay color I'd like for there to be text centered in the circle. img { clip-path: url(#myClip);

Why does svg <use xlink:href=“#”/> referencing an element with clip-path not work?

阅读更多关于 Why does svg referencing an element with clip-path not work?

问题 When implementing an SVG sprite, an <svg> element is created and svg elements are referenced via the <use> element. The containing <svg> element is then hidden using style="display: none;" The clip-Path attribute does not render, but the path does. This leaves my path looking different from how I want it to. How do I use an svg <use xlink:href="#"/> referencing an element with clip-path? I used grunt-svg-store to create my svg sprite, but have simplified this example for Q&A format https:/

Create a Reverse Clip-Path - CSS or SVG

阅读更多关于 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 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 positioned absolutely inside a red square and want to be able to punch a shape out of the blue square so