说明
设计的想法天马行空，产品要求高大上，菱形item就出来啦
菱形菜单效果图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul{
list-style:none;
}
.grad1 {
width:50px;
border: 1px solid #44a5fc;
color: #333;
transform: skewY(-20deg);
height: 100px;
background: linear-gradient(red, blue); /* 标准的语法（必须放在最后） */
}
.grad1:hover{
background: linear-gradient(red, black); /* 标准的语法（必须放在最后） */
}
.grad1 div {
color: #fff;
transform: skewY(20deg);
text-align:center;
line-height:100px;
}
</style>
</head>
<body>
<ul>
<li class="grad1"><div>上海</div></li>
<li class="grad1"><div>上海</div></li>
<li class="grad1"><div>上海</div></li>
</ul>
</body>
</html>
网友评论