摘要:本篇教程介绍了HTML+CSS入门 CSS梯形标签页,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
本篇教程介绍了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知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号