CSS 之剪下橫幅
阿新 • • 發佈：2018-11-04
clip-path屬性指定一個應用到元素上的剪下路徑。應用在SVG中<clipPath>元素上的屬性值可以完全運用在clip-path屬性上。還可以使用CSS Shapes模組中的基本形狀來定義剪下路徑。這些形狀可以使用形狀函式來建立。這些形狀態函式包括polygon()、circle()、inset()(用來定義嵌入的矩形)和ellipse()。
使用clip-path屬性將一個剪下路徑運用在一個元素上非常的簡單，下面我們來看一個剪下實現。
剪下效果
通過clip-path我們可以設定一個剪下路徑，polygon表示多邊形。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>剪下橫幅</title> <style type='text/css'> div { width: 250px; padding: 9px 0 9px 5%; color: #fff; background-color: #d32f36; -webkit-clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%); clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%); } </style> </head> <body> <div>剪下橫幅</div> </body> </html>
分析
我們先看下圖
座標橫座標和縱座標起點均是從0開始，最大值為100%。
圖中標識出的順序依次對應polygon的座標，polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%)。
即：
- 1 - 座標點：0 0
- 2 - 座標點：100% 0
- 3 - 座標點：95% 50%
- 4 - 座標點：100% 100%
- 5 - 座標點：0 100%
- 6 - 座標點：5% 50%
