html 打印梯形水平线,HTML+CSS入门 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知识！