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

回答

相關問題