根據她的以往經驗，這個網站的HTML和CSS是完全在她的能力范圍以內，于是我幫助她完成了這個效果。顯示nav被裁減的效果是一個不簡單的任務，我看到圖片的第一反應是創建一個相匹配的背景被部分裁剪的圖像，然后把它設置為一個after元素。問題是，至少要解決響應式問題，并且響應式并不完全可控的。
了解CSS屬性：clip-path

clip-path 是工作草案的一部分，它是一個通過屏蔽和裁減來隱藏元素的一部分的工具。盡管clip-path沒有被主流的瀏覽器支持（包括IE和Firefox），但在webkit瀏覽器中，它仍然是一個實現時尚效果的小工具。

注意，在現代瀏覽器中需要使用-webkit-前綴。

clip-path 簡單的工作原理是提供一系列的X和Y值來創建路徑。當使用這些值創建一條完整路徑時，就會把圖像按照路徑內部的尺寸進行裁剪。

利用clip-path，我們可以創建圓形、橢圓和多邊形等不同的形狀，創造力是唯一的限制。
一個簡單的三角形裁減

View the code on codepen
對元素簡單地運用clip-path就能實現上面的效果：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表