~~~ <style type="text/css"> svg{ display: block; border: 1px solid red; margin: 10px auto; } .box{ width: 300px; height: 300px; background: skyblue; transition: -webkit-clip-path 0.5s; /*-webkit-clip-path:polygon(0 100%,50% 0,100% 100%);*/ /*-webkit-clip-path:circle(50% at 50% 50%);*/ /*-webkit-clip-path:ellipse(30% 20% at 50% 50%);*/ /*-webkit-clip-path:inset(25% 0 25% 0 round 0 25% 0 25%);*/ /*-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);*/ /*-webkit-clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 37% 38%);*/ -webkit-clip-path: polygon(20% 0%, 0% 0%, 0% 50%, 0% 80%, 0% 100%, 50% 100%, 80% 100%, 100% 100%, 100% 50%, 100% 0%, 80% 0%, 50% 0%); } .box:hover{ -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); } </style> ~~~ ~~~ <div class="box"> <!--CSS-clip-path案例--> </div> <svg width="500" height="300"> <rect x="0" y="0" width="200" height="100" fill="red" /> <circle cx="100" cy="100" r="100" fill="skyblue" /> </svg> <svg width="500" height="300"> <defs> <clipPath id="clipPath"> <rect x="0" y="0" width="200" height="100" fill="red" /> </clipPath> </defs> <circle cx="100" cy="100" r="100" fill="skyblue" clip-path="url(#clipPath)" /> </svg> ~~~