CSS可以實現各種各樣的形狀效果,其中經常被用到的一種形狀就是“一邊斜角”的長方形,下面就來介紹如何實現。
.box { width: 200px; height: 100px; background-color: #333; position: relative; } .box::before { content: ""; position: absolute; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-right: 50px solid #333; top: 0; left: -50px; }
如上所示,我們先定義一個長方形的盒子,然后使用偽元素:before來創建一個三角形,利用邊框顏色和盒子背景色相同來隱藏已經超出邊框范圍的部分,使其成為一個斜角。具體來說,我們給三角形設置一個寬度為0,高度為0的矩形,并設置三個邊框:上下各50px的透明邊框,右側50px的與盒子背景色相同的實色邊框,然后定位到盒子的左側,垂直與頂部對齊即可。
這樣,我們就實現了一個帶有斜角的長方形,當然,如果需要對斜角的角度、寬度等進行調整,只需對:before中的邊框寬度進行修改即可。
上一篇CSS長方形右側上移
下一篇css閱讀量圖標