CSS怎么实现平行四边形

　　介绍

这篇文章主要介绍CSS怎么实现平行四边形,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

具体如下:

先上效果图

CSS怎么实现平行四边形

平行四边形可以用做导航栏部分。

原理:利用变换属性拉伸矩形。

<强> CSS代码

变换:,skewX(-45度),

上面的代码表示:沿X轴倾斜-45度。

但如果只用上面的代码作用在元素上,会导致其内容也发生倾斜变形,会影响阅读。

CSS怎么实现平行四边形

<强>解决方法1:嵌套元素

用嵌套元素的方法,对内容再应用一次反向的倾斜()变形,从而抵消容器对内容产生的变形效果。

HTML代码

& lt; https://www.yisu.com/zixun/a  href=" http://suo.im/1yaTY3 "> 　　
家
　　

CSS代码

a  { 　　,,,宽度:,100 px; 　　,,,身高:,40像素; 　　,,,显示:,flex; 　　,,,justify-content:,中心; 　　,,,对齐项目:,中心; 　　,,,背景:,# 58; 　　,,,文字修饰:,没有; 　　,,,颜色:,# fff; 　　,,,变换:,skewX(-45度); 　　} 　　div  { 　　,,,变换:,skewX(45度); 　　}

效果如图所示

CSS怎么实现平行四边形

这种方法在表现上很不错,不过在逻辑上比较直接粗暴。

我们理解的HTML,更应该作用在框架的搭建上,而不是样式的表现上。如果结构层的更变是不允许的,或者希望严格保持结构层的纯净度,这种方法不是好方法。

注意:像上面的例子中,如果想把布局的样式用在一个(内联元素)里,记得把它的显示设成inline-block或块等值,否则变形不会生效。

这里我设置成flex,为了方便把内容居中。

<强>解决方法二:伪元素

把所有样式应用到伪元素上,然后再对伪元素进行变形。
内容层(文字部分)只做颜色,字号等设置。

HTML代码

& lt; https://www.yisu.com/zixun/a  href=" http://suo.im/1yaTY3 "> 　　家 　　

CSS代码

:: before  { 　　,,,内容:,& # 39;& # 39;; 　　,,,位置:,绝对; 　　,,,:,0; 　　,,,右:,0; 　　,,,底部:,0; 　　,,,左:,0; 　　,,,z - index:, 1; 　　,,,背景:,# 58; 　　,,,变换:,skewX(-45度); 　　} 　　a  { 　　,,,宽度:,100 px; 　　,,,身高:,40像素; 　　,,,位置:,相对; 　　,,,显示:,flex; 　　,,,justify-content:,中心; 　　,,,对齐项目:,中心; 　　,,,颜色:,# fff; 　　,,,文字修饰:,没有; 　　}

CSS怎么实现平行四边形

也能得到同样的效果。这种方法不会污染HTML结构层。

这种方法为伪元素保持了良好的灵活性,可以自动继承其宿主元素的尺寸。

首先给宿主元素应用位置:相对样式,并为伪元素设置位置:绝对的,然后再把所有偏移量设置为0,以便让它在水平和垂直方向上都被拉伸至宿主元素的尺寸(上图:0;右:0;底部:0;左:0;)。

此时,用伪元素生成的方块是重叠在内容之上的,一旦给它设置背景,就会遮住内容,所以要为伪元素设置z - index: 1。这样它的堆叠层次就会被推到宿主元素之后。

以上是“CSS怎么实现平行四边形”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!

CSS怎么实现平行四边形