本篇教程介绍了HTML+CSS入门 CSS梯形标签页,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
<
html 代码 略
css :
nav > a{
position: relative;
display: inline_block;
padding: .3em 1em 0;
}
nav > a {
content: ‘‘;
position: absolute;
top: 0;
right: 0;
bottom:0;
left: 0;
z-index: -1;
background; #ccc;
background-image;linear-gradint(
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 white inset;
transform: perspective(.5) rotate(5deg);
transform-origin: bottom;
}
效果图如下:
(只需改变 transform-origin 可以得到单侧面的梯形:设置为 bottom left 或 bottom right 可以得到左侧倾斜或右侧倾斜的标签页)
本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!