梯形标签页
2017-07-28 本文已影响0人
_菡曳_
梯形是用CSS难以生成的形状，使用伪元素可行，但不灵活。
Sooooooooo,我们可以使用CSS中的3D旋转（由于透视的关系，我们最终看到的二维图像就是一个梯形！）来模拟出这个效果：
transform: perspective(.5em) rotateX(5deg);
使用3D变形内部的变形效应是不可逆转的
因此，我们应该采用将变形效果作用在伪元素上的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>梯形标签页</title>
<style type="text/css" media="screen">
.tab{
display: block;
position: relative;
margin:0 auto;
padding: .3em;
width: 5em;
font-size: 2em;
text-align: center;
text-decoration: none;
color:#fff;
}
.tab::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;
}
</style>
</head>
<body>
<a href="" class="tab">Click me</a>
</body>
</html>
使用这种技巧的标签应用样式就会很灵活：
.tabs{
display: block;
position: relative;
margin:0 auto;
padding: .3em;
width: 5em;
font-size: 2em;
text-align: center;
text-decoration: none;
color:#fff;
}
.tabs::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;
box-shadow: 0 .15em width inset;
transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
transform-origin: bottom left;
}
效果图
