css运用transform skewX制做平行4边形导航栏菜单

日期:2020-10-30 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

平行4边形实际上是矩形框的超集:它的各条边是两两平行的,但各个角则不1定全是直角。在视觉效果设计方案中,平行4边形常常能够传递出1种动感。

让大家试着用 CSS 建立1个按钮状的平行4边形连接。大家的起始点便是1个一般的块状按钮,辅以1些简易的款式,随后,大家能够根据 skew() 的形变特性来对这个矩形框开展斜向拉伸:

transform: skewX(⑷5deg);

可是,这致使它的內容也产生了斜向形变,这很不太好看,并且难读。有木有方法只让器皿的样子歪斜,而维持其內容不会改变呢?

许多人会想起嵌套循环元素计划方案,那末大家能够对內容再运用1次反方向的 skew() 形变,从而相抵器皿的形变实际效果,最后造成大家所期待的結果。悲剧的是,这代表着大家将迫不得已应用1层附加的 HTML 元向来包裹內容,例如用1个 span:

<a href="www.jb51.net" class="button">
 <span>www.jb51.net</span>
</a>

.button { transform: skewX(⑷5deg); }
.button > span { transform: skewX(45deg); }

大家能够看到,这个方式的主要表现很非常好,但它也代表着大家迫不得已加上附加的 HTML 元素。假如构造层的变动是不容许的,或你期待严苛维持构造层的纯净度,别担忧,大家也有1个纯 CSS 的处理计划方案。

伪元素计划方案

另外一种思路是把全部款式(情况、边框等)运用到伪元素上,随后再对伪元素开展形变。由于大家的內容其实不是包括在伪元素里的,因此內容其实不会遭受形变的危害。下面看来看这个技能能否获得与前面同样的连接款式。

大家期待伪元素维持优良的灵便性,能够全自动承继其寄主元素的规格,乃至当寄主元素的规格是由其內容来决策时依然这般。1个简易的方法是给寄主元素运用 position: relative 款式,并为伪元素设定 position:absolute,随后再把全部偏位量设定为零,便于让它在水平静竖直方位上都被拉伸至寄主元素的规格。编码看起来是这样的:

.button {
 position: relative;
 /* 别的的文本色调、内边距等款式…… */
}
.button::before {
 content: '';
 position: absolute;
 top: 0; right: 0; bottom: 0; left: 0;
}

此时,用伪元素转化成的方块是重合在內容之上的,1旦给它设定情况,就会遮挡住內容。以便修补这个难题,大家能够给伪元素设定z-index: ⑴ 款式,这样它的层叠层级就会被推到寄主元素以后。如今大家要做的最终1步,便是畅快地对它设定形变款式,并享有幸福的結果。最后版的编码以下所示,它造成的视觉效果实际效果跟前文所述技能是彻底1致的:

.button {
 position: relative;
 /* 别的的文本色调、内边距等款式…… */
}
.button::before {
 content: ''; /* 用伪元向来转化成1个矩形框 */
 position: absolute;
 top: 0; right: 0; bottom: 0; left: 0;
 z-index: ⑴;
 background: #58a;
 transform: skew(45deg);
}

这个技能不但对 skew() 形变来讲很有效,还可用于别的任何形变款式,当大家想形变1个元素而不想形变它的內容时便可以用到它。举个事例,大家把这个技能对于 rotate() 形变款式稍稍调剂1下,再用到1个正方形元素上,便可以很非常容易地获得1个菱形。

这个技能的重要在于,大家运用伪元素和精准定位特性造成了1个方块,随后对伪元素设定款式,并将其置放在其寄主元素的下层。这类思路一样能够应用在别的情景中,从而获得各种各样各种各样的实际效果。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。