css3倾斜的平行四边形,利用css3中transform skewX怎么实现平行四边形的导航菜单

利用css3中transform skewX怎么实现平行四边形的导航菜单

发布时间:2020-09-14 11:29:51

来源:亿速云

阅读:95

作者:小新

利用css3中transform skewX怎么实现平行四边形的导航菜单?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

平行四边形其实是矩形的超集:它的各条边是两两平行的,但各个角则不一定都是直角。在视觉设计中,平行四边形往往可以传达出一种动感。

让我们试着用 CSS 创建一个按钮状的平行四边形链接。我们的起点就是一个普通的块状按钮,辅以一些简单的样式,然后,我们可以通过 skew() 的变形属性来对这个矩形进行斜向拉伸:transform: skewX(-45deg);

但是,这导致它的内容也发生了斜向变形,这很不好看,而且难读。有没有办法只让容器的形状倾斜,而保持其内容不变呢?

很多人会想到嵌套元素方案,那么我们可以对内容再应用一次反向的 skew() 变形,从而抵消容器的变形效果,最终产生我们所期望的结果。不幸的是,这意味着我们将不得不使用一层额外的 HTML 元素来包裹内容,比如用一个 span:

www.php.cn

.button { transform: skewX(-45deg); }

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

我们可以看到,这个方法的表现很不错,但它也意味着我们不得不添加额外的 HTML 元素。如果结构层的变更是不允许的,或者你希望严格保持结构层的纯净度,别担心,我们还有一个纯 CSS 的解决方案。

伪元素方案

另一种思路是把所有样式(背景、边框等)应用到伪元素上,然后再对伪元素进行变形。因为我们的内容并不是包含在伪元素里的,所以内容并不会受到变形的影响。下面来看看这个技巧能否得到与前面相同的链接样式。

我们希望伪元素保持良好的灵活性,可以自动继承其宿主元素的尺寸,甚至当宿主元素的尺寸是由其内容来决定时仍然如此。一个简单的办法是给宿主元素应用 position: relative 样式,并为伪元素设置 position:absolute,然后再把所有偏移量设置为零,以便让它在水平和垂直方向上都被拉伸至宿主元素的尺寸。代码看起来是这样的:.button {

position: relative;

/* 其他的文字颜色、内边距等样式…… */

}

.button::before {

content: '';

position: absolute;

top: 0; right: 0; bottom: 0; left: 0;

}

此时,用伪元素生成的方块是重叠在内容之上的,一旦给它设置背景,就会遮住内容。为了修复这个问题,我们可以给伪元素设置z-index: -1 样式,这样它的堆叠层次就会被推到宿主元素之后。现在我们要做的最后一步,就是尽情地对它设置变形样式,并享受美好的结果。最终版的代码如下所示,它产生的视觉效果跟前文所述技巧是完全一致的:.button {

position: relative;

/* 其他的文字颜色、内边距等样式…… */

}

.button::before {

content: ''; /* 用伪元素来生成一个矩形 */

position: absolute;

top: 0; right: 0; bottom: 0; left: 0;

z-index: -1;

background: #58a;

transform: skew(45deg);

}

这个技巧不仅对 skew() 变形来说很有用,还适用于其他任何变形样式,当我们想变形一个元素而不想变形它的内容时就可以用到它。举个例子,我们把这个技巧针对 rotate() 变形样式稍稍调整一下,再用到一个正方形元素上,就可以很容易地得到一个菱形。

这个技巧的关键在于,我们利用伪元素以及定位属性产生了一个方块,然后对伪元素设置样式,并将其放置在其宿主元素的下层。这种思路同样可以运用在其他场景中,从而得到各种各样的效果。

感谢各位的阅读!看完上述内容,你们对利用css3中transform skewX怎么实现平行四边形的导航菜单大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注亿速云行业资讯频道。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,针对您的问题,我来给你简单介绍一下。 首先,关于 CSS3 平行四边形,可以通过 CSS3transform 属性来实现。具体做法是先将元素进行旋转,再将其进行扭曲,最后再将其旋转回来,从而实现平行四边形的效果。下面是一个示例代码: ```css div { width: 100px; height: 50px; background-color: #f00; transform: skewX(30deg) rotate(-30deg) skewX(-30deg); } ``` 上述代码skewX() 函数用来扭曲元素,rotate() 函数用来旋转元素。你可以根据自己的需求调整这些参数来实现不同的平行四边形效果。 而关于大括弧,可以通过 CSS3 的 ::before 和 ::after 伪元素来实现。具体做法是先将元素设置为相对定位,再通过伪元素来创建大括弧形状,最后再通过 CSS3transform 属性来进行旋转和定位。下面是一个示例代码: ```css div { position: relative; width: 100px; height: 50px; background-color: #f00; } div::before { content: ""; position: absolute; top: -10px; left: -10px; width: 20px; height: 20px; border-top: 2px solid #000; border-left: 2px solid #000; transform: rotate(-45deg); } div::after { content: ""; position: absolute; bottom: -10px; left: -10px; width: 20px; height: 20px; border-bottom: 2px solid #000; border-left: 2px solid #000; transform: rotate(45deg); } ``` 上述代码,::before 和 ::after 伪元素分别用来创建左上角和左下角的大括弧形状,border-* 属性用来设置边框样式,transform 属性用来进行旋转和定位。你可以根据自己的需求调整这些参数来实现不同形状的大括弧。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值