色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css3 直角梯形

吳曉飛1年前8瀏覽0評論

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直角梯形效果可以應用于導航欄中,為導航欄增加美觀的圖形效果。