在 CSS 中,實現斜邊可以通過幾種方法,下面將介紹其中兩種比較常用的方法。
方法一:借助偽元素
.box { position: relative; width: 200px; height: 100px; background-color: #3388BB; } .box::before { content: ""; position: absolute; top: 0; left: 0; border-style: solid; border-width: 0 0 100px 200px; border-color: transparent transparent #3399CC transparent; }
方法二:使用 transform
.box { position: relative; width: 200px; height: 100px; background-color: #3388BB; } .box::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #3399CC; transform-origin: top right; transform: skew(-45deg); }
以上兩種方法均可以實現斜邊效果,但使用 transform 的方法相對更簡單,而且可以通過調整 skew 的角度來實現不同的斜邊效果。
上一篇ionic3 引入css
下一篇ionic2css文檔