div两侧倾斜,子元素不受影响

审核中 CSS3 未结 已结 置顶 精帖
删除 置顶 取消置顶 加精 取消加精
66 0
yswl
yswl VIP3 2021-09-04 10:35:06
悬赏:60金币 编辑此贴

div两侧倾斜,子元素不受影响

父元素跟子元素的角度需要互相反向设置,不然子元素也会倾斜

父元素用:transform: skew(45deg);
子元素用:transform: skew(-45deg);
.ny_lm ul li{ width: 220px; transform: skew(45deg, 0deg); height: 58px; display: inline-block; text-align: center; position: relative;}
.ny_lm ul li a{ display: block; transform: skew(-45deg); font-size: 16px; color: #323232; line-height: 58px; position: absolute; width: 100%; height: 100%;}
.ny_lm ul li.on{ background: #E62334; }
.ny_lm ul li.on a{ color: #fff;}
.ny_lm ul li:hover{ background: #E62334;  transform: skew(45deg, 0deg);}
.ny_lm ul li:hover a{color: #fff;}


效果:

image

image