平行四边形其实是矩形的超集:它的各条边是两两平行的,但各个角则不一定都是直角。在视觉设计中,平行四边形往往可以传达出一种动感。
让我们试着用 CSS 创建一个按钮状的平行四边形链接。我们的起点就是一个普通的块状按钮,辅以一些简单的样式,然后,我们可以通过 skew() 的变形属性来对这个矩形进行斜向拉伸:

transform: skewX(-45deg);

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

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

<a href="www.w3cbest.com" class="button">
<span>www.w3cbest.com</span>
</a> .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() 变形样式稍稍调整一下,再用到一个正方形元素上,就可以很容易地得到一个菱形。

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

更多精彩

利用transform skewX制作平行四边形导航菜单的更多相关文章

  1. 使用 jQuery 和 CSS3 制作滑动导航菜单

    这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示  ...

  2. 利用jquery实现百度新闻导航菜单滑动动画

    前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...

  3. 【Web】利用jquery实现百度新闻导航菜单滑动动画

    前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...

  4. 利用Html.css OPPO手机导航菜单的制作解析

    <body> <div id="top" class="auto"> <div class="nav"> ...

  5. Javascript导航菜单13则

    来源:http://www.noupe.com/ajax/13-awesome-java-script-css-menu.html翻译:http://parandroid.com下面为你准备了13个利 ...

  6. 【CSS3】---练习制作导航菜单

    练习题 根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用box-shadow实现立体风格 3.制 ...

  7. CSS3特效----制作立体导航栏菜单

    使用CSS3实现下图的导航菜单效果 <!doctype html> <html lang="en"> <head> <meta chars ...

  8. CSS3背景 制作导航菜单综合练习题

    CSS3背景 制作导航菜单综合练习题 小伙伴们,根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用 ...

  9. Smint – 用于单页网站制作的 jQuery 导航菜单插件

    Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...

随机推荐

  1. IDEA使用git提交代码时,点了commit之后卡死在performing code analysis部分,或者performing code analysis结束后没有进入下一步操作

    把"Perform code analysis" 和 "Check TODO" 复选框前面的勾去掉就好了. 这个可能是因为所分析的目标文件太大了,造成一直分析不 ...

  2. LoadRunner 技巧之 自动关联

    LoadRunner 技巧之 自动关联 这一节讲loadunner 关联的问题,其实这个东西理解起来简单,但说起来比较麻烦. 关联的原理:                               ...

  3. Java Stream流排序null以及获取指定条数数据

    Java8的Stream流的一些用法, //排序 carerVehEntityList = carerVehEntityList.stream().sorted( Comparator.compari ...

  4. getApplication()和getApplicationContext()区别

    二者使用结果相同,我们写个代码分别打印二者返回结果,发现两个方法获取的是同一个对象. public class MainActivity extends Activity { @Override pr ...

  5. char* a = "abc" 和 char a[] = "abc" 之间的区别

    char* a = "abc"; 声明了一个字符类型的指针a,并为它赋值初始值为"abc",a的值是字符串"abc"的首地址[第一个字符的地 ...

  6. mysql中索引类型

    mysql索引类型normal,unique,full text的是什么? normal:表示普通索引 unique:表示唯一的,不允许重复的索引,如果该字段信息保证不会重复例如身份证号用作索引时,可 ...

  7. 【VS开发】 自己编写一个简单的ActiveX控件——详尽教程

    最近开始学ActiveX控件编程,上手不太容易,上网想找相关教程也没合适的,最后还是在师哥的指导下完成了第一个简单控件的开发,现在把开发过程贴出来与大家分享一下~ (环境说明--平台:vs2005:语 ...

  8. Linux学习笔记(14)linux在6.x和7.x系列的安装与基本使用区别

    关键词,centos7 centos6.x安装与使用:https://www.cnblogs.com/gered/p/9440551.html centos7.x安装与使用(本文)转自:https:/ ...

  9. Java第三周总结报告

    本周做了什么? 本周利用Java语言重新回顾了条件结构与循环结构和字符串的处理等问题,认识到了Java与C/C++的在这两个方面的不同. 下周准备做什么? 学习Java面向对象的有关知识,包括对象与类 ...

  10. rk3288 编译应用程序

    一. Android.mk 1.1. 什么是.mk Android.mk是Android提供的一个makefile文件,可以将源文件分组为模块.用来引用的头文件目录.需要编译的*.c/*.cpp文件. ...