在web设计中，梯形选项卡效果是很常见的一种形式，但是梯形又是一种很难实现的样式，很多开发者会直接用梯形背景图片来生成效果，但是采用背景图片的方式产生了额外的http请求，并不是一种非常理想的方式，这里小编为大家带来一种直接用css来实现梯形效果的方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{
width: 120px;
text-align: center;
text-decoration: none;
color:inherit;
font-size: 20px
}
nav > a{
position:relative;
display:inline-block;
padding:.3em .1em 0;
}
nav > a:before{
content:'';
position:absolute;
top: 0;right: 0;left: 0;bottom: 0;
z-index:-1;
background:#ccc;
border:1px solid black;
border-radius: .5em .5em 0 0 ;
box-shadow: 0 .15em white inset;
transform:scaleY(1.3) perspective(.5em) rotateX(5deg);
transform-origin: bottom;
}
</style>
</style>
</head>
<body>
<nav>
<a href="#">首页</a>
<a href="#">Html/Css</a>
<a href="#">JavaScript</a>
</nav>
</body>
</html>
效果：
原文链接：https://www.qiquanji.com/post/8305.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知