CSS3菱形

-2

我已经使用CSS3菱形的HTML代码如下但这不能掩盖我的要求，我需要菱形和悬停动画，检查我的代码CSS3菱形

img.clip { \t 
 
    -webkit-clip-path: polygon(50% 78%, 0 0, 100% 0); \t 
 
    clip-path: polygon(50% 78%, 0 0, 100% 0); 
 
} 
 
    
 
img.tclip { \t 
 
    -webkit-clip-path: polygon(100% 100%, 50% 90%, 50% 90%, 0 100%); \t 
 
    clip-path: polygon(100% 100%, 50% 90%, 50% 90%, 0 100%); 
 
}

<a href="#"> 
 
    <img src="https://www.w3schools.com/css/img_fjords.jpg" 
 
    class="tclip"/> 
 
    <img src="https://www.w3schools.com/css/img_fjords.jpg" 
 
    class="clip"/> 
 
</a>

来源

2017-07-24 RameshJI

现在，目前尚不清楚你到底想要达到什么目的。请帮助我们了解预期的最终结果。 – Salketer

请检查链接https://jsfiddle.net/434496yd/ – RameshJI

我需要悬停动画 – RameshJI

，如果你想添加一个悬停动画，您可以使用CSS这样

#diamond{ 
    transition: 3s all; 
} 
#diamond:hover { 
    opacity: 0.5; //here your second state, on hover 
}

与这个网站

<a href="#" id="diamond">

或者你想要一个真正的钻石车削动画？

来源

2017-07-24 12:33:28 Neil

感谢您提供代码，我会检查并更新您 – RameshJI

回答

相关问题