最近在逛某个技术网站的时候, 感觉文章关键词上的样式好酷炫啊于是我将那种写法照搬到了我的博客中, 也许最近逛过我博客的小伙伴已经发现了它出现在哪儿了分页的样式来张截图:
你在首页的底部也可以看到这样一个分页栏; 是不是看上去还不错? 下面就来看看这是如何实现的吧~
第一种方法: 利用 border
第一种方法是借助 border 属性 hack 出三角形, 然后通过一个矩形拼接两个三角形最终制造出一个平行四边形为什么使用 border 可以产生三角形呢? 先来看看一张图片:
看了图中的三个小图形的变化过程, 你应该已经清楚了一半其实 hack 出三角形只需要两个条件, 第一, 元素本身的长宽为 0; 其次, 将不需要的部分通过 border-color 来设置隐藏通过类似的方法, 你还可以创造出梯形, 上图中的三个图形的代码如下(另附 CodePen 示例)
- #first {
- width: 20px;
- height: 20px;
- border-width: 10px;
- border-style: solid;
- border-color: red green blue brown;
- }
- #second {
- width: 0;
- height: 0;
- border-width: 10px;
- border-style: solid;
- border-color: red green blue brown;
- }
- #third {
- width: 0;
- height: 0;
- border-width: 10px;
- border-style: solid;
- border-color: red transparent transparent transparent;
- }
接下来就要考虑如何拼接出一个平行四边形了在 border 法中, 它由三部分组成, 分别是左三角形矩形右三角形如果每次绘制平行四边形都要创建三个元素显然过于麻烦了, 所以在这里: before 和: after 伪元素是个不错的选择下面我们实现一下这样的效果:
为了将三角形与矩形无缝拼接到一起, 多处属性要保持一致, 所以使用类似 Less, Sass, Stylus 等 CSS 预处理器来写这段代码会更容易维护, 下面给出 Scss 版本的代码(另附 CodePen 链接)
- // 三角形的宽高
- $height: 24px;
- $width: 12px;
- // 对平行四边形三部分的颜色进行赋值
- @mixin parallelogram-color($color) {
- background: $color;
- &:before { border-color: transparent $color $color transparent; }
- &:after { border-color: $color transparent transparent $color; }
- }
- // 单个三角形的样式
- @mixin triangle() {
- content: '';
- display: block;
- width: 0;
- height: 0;
- position: absolute;
- border-style: solid;
- border-width: $height/2 $width/2;
- top: 0;
- }
- // 平行四边形的样式
- .para {
- display: inline-block;
- position: relative;
- padding: 0 10px;
- height: $height;
- line-height: $height;
- margin-left: $width;
- color: #fff;
- &:after {
- @include triangle();
- right: -$width;
- }
- &:before {
- @include triangle();
- left: -$width;
- }
- @include parallelogram-color(red);
- }
需要注意的是, 如果通过 $height$width 设置的三角形斜率太小或太大都有可能造成渲染出锯齿, 所以使用起来要多多测试一下不同的宽高所得到的视觉效果如何
第二种方法: 利用 transform
使用 transform 来实现平行四边形的方法是我在逛去啊的时候看到的, 效果大概是这个样子:
看到之后觉得好神奇啊, 原来还可以只有平行四边形的外轮廓 (因为方法一只能创造填充效果的平行四边形) 实现起来非常简单, 主要是借助了 transform: skew(), 下面就来看看源码吧
上海
于是我们得到了这样的效果:
看到图片的你一定是这样想的:
别着急嘛, 我们的确是把整个 div 进行了歪曲, 导致中间的文字也是倾斜的, 而这显然不是我们所要的效果所以我们需要加一个内层元素, 并对内层元素做一次逆向的歪曲, 从而得到我们想要的效果:
来源: http://www.jqhtml.com/11490.html