CSS3直角梯形效果可以讓網頁更加美觀,給用戶提供更好的視覺體驗。下面我們一起來看看如何實現CSS3直角梯形效果。
/* 實現斜角梯形 */ trapezoid { width: 200px; height: 0; border-bottom: 50px solid red; border-left: 100px solid transparent; border-right: 100px solid transparent; } /* 實現直角梯形 */ right-trapezoid { width: 200px; height: 50px; position: relative; } right-trapezoid:before { content: ""; position: absolute; top: 0; left: -50px; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-right: 50px solid red; } right-trapezoid:after { content: ""; position: absolute; top: 0; right: -50px; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid red; }
如上代碼中,通過border設置上下兩條邊的樣式,左右兩條邊使用transparent透明邊框實現斜角梯形效果,并賦值給trapezoid類。而直角梯形則是通過偽元素before和after在右側增加邊框實現的,其中before邊框在左側,after邊框在右側,兩個邊框與原元素構成直角梯形。
CSS3直角梯形效果可以應用于導航欄中,為導航欄增加美觀的圖形效果。
下一篇php 8203