css实现梯形标签页

在web设计中，梯形标签页是很常见的一种形式，但是梯形又是一种很难实现的样式，很多开发者会直接用梯形背景图片来生成效果，但是采用背景图片的方式产生了额外的http请求，并不是一种非常理想的方式，这里笔者为大家带来一种直接用css来实现梯形效果的方法。
以一个简单的div为例：

<div class="div">这是一个梯形</div>

.div{position: relative;display: inline-block;padding: .5em 1em .35em;color: white;
}
.div::before{content: ''; /*用伪元素来生成一个矩形*/position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: -1;background: #58a;transform: scaleY(1.3) perspective(.5em) rotateX(5deg);transform-origin: bottom;
}

如果我们直接对元素结点进行3D变形，那么元素内的内容也会产生变形，这是一种不理想的效果，所以这里利用伪元素，将变形效果作用到伪元素上，就可以实现理想的效果。在这里，变形的时候，我们固定住了底部，它的高度是会发生变化的，所以通过scaleY(1.3)来补足它在高度上的缩水。读者可以去掉scaleY(1.3)和transform-origin来对比查看效果，这里笔者将两种结果都展示出来：

既然一个梯形标签产生了，那我们就可以进一步生成多个标签页，这里笔者为大家带来一个简单的示例。

<nav><a href="#">Home</a><a href="#">Projects</a><a href="#">About</a>
</nav>

nav>a{position: relative;display: inline-block;padding: .3em 1em 0;
}
nav>a::before{content: '';position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: -1;background: #ccc;background-image: linear-gradient(hsla(0,0%,100%,.6),hsla(0,0%,100%,0));border: 1px solid rgba(0,0,0,.4);border-bottom: none;border-radius: .5em .5em 0 0;transform: perspective(.5em) rotateX(5deg);transform-origin: bottom;
}

产生的效果图是这样的：

读者可以改变transform-origin的属性为：left,right,bottom left, left right等查看不同的效果，这里笔者为大家展示几种效果:

感兴趣的读者可以自己尝试一些，如果有更好的方法，欢迎留言指教。

css实现梯形标签页相关推荐

梯形面积php,CSS实现梯形标签页
在web设计中,梯形标签页是很常见的一种形式,但是梯形又是一种很难实现的样式,下面小编给大家分享使用CSS实现梯形标签页的代码,需要的朋友参考下吧在web设计中,梯形标签页是很常见的一种形式,但是梯 ...
JavaScript 实现标签页切换效果
JavaScript 实现标签页切换效果构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id="tab">& ...
JS实现标签页效果(配合css)不同标签下对应不同div
显示页面tab.jsp <%@ page language = "java" import = "java.util.*" pageEnc ...
用css和jquery实现标签页效果（一）
用css和jQuery实现一个简单的标签页效果,用css实现斜边导航的效果,除了ie6其他的浏览器都支持, 其效果如下 css样式: <style type="text/css ...
自定义浏览器起始页、主页和标签页（html+css）
以Chrome为例,自定义一个浏览器的起始页 Chrome的标签页有两个个人不太喜欢的点.一个是无法自定义浏览器的访问按钮,一个是搜索框在顶上的标签栏.在手机上,夸克浏览器的起始界面用户体验非常好,就 ...
EasyUI中Tabs标签页的简单使用
场景效果属性 tabs none 返回全部的标签页面板(tab panel). resize none 调整标签页(tabs)容器的尺寸并做布局. add options 添加一个新的标签页面板( ...
使用bootstrap标签页
关键字:使用标签页,静态调用html页面(使用iframe内联框架) 完整代码如下: <!DOCTYPE html> <htmllang="en"> < ...
easyui打开新的选项卡_Easyui Tabs 标签页/选项卡_EasyUI 插件
通过 $.fn.tabs.defaults 重写默认的 defaults. The tabs display a collection of panel. It shows only one tab ...
Chrome开发者工具Element style里的Computed标签页
View only the CSS that's actually applied to an element 根据Chrome开发者工具文档介绍,styles标签页里显示的是所有施加到一个HTML ...

css实现梯形标签页

css实现梯形标签页相关推荐

最新文章

热门文章