Taylor_jdt 静态 0 评论 109 阅读 2019-03-13 16:51:52 举报
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- .pr{position: relative;} .pr ul li{list-style: none;float: left;width:150px;height:
- 50px;line-height: 50px; text-align: center;color:#fff;font-size:24px;padding-left:
- 10px;background-repeat: no-repeat;transition: background-size 0.3s;} .mb{
- background: #e4393c; background:linear-gradient(-115deg, transparent 20px,
- #e4393c 0)top right,linear-gradient(-62deg, transparent 20px, #e4393c 0)bottom
- right; background-size: 100% 50%; } .mb:hover{background-size:100% 25%;color:#000;cursor:
- pointer;} .mbz{ background: #e4393c; background:linear-gradient(-115deg,
- transparent 20px, #e4393c 0)top right, linear-gradient(-62deg, transparent
- 20px, #e4393c 0)bottom right, linear-gradient(-295deg, transparent 19px,
- #e4393c 0)top left, linear-gradient(-242deg, transparent 19px, #e4393c
- 0)bottom left; margin-left: -30px;background-size: 50% 50%; } .mbz:hover{background-size:50%
- 25%;color:#000;cursor: pointer;}
- </style>
- </head>
- <body>
- <div class="pr">
- <ul>
- <li class="mb">
- 首页
- </li>
- <li class="mbz">
- 一级
- </li>
- <li class="mbz">
- 二级
- </li>
- <li class="mbz">
- 三级
- </li>
- <li class="mbz">
- 四级
- </li>
- <li class="mbz">
- 五级
- </li>
- <li class="mbz">
- 六级
- </li>
- <li class="mbz">
- 七级
- </li>
- <li class="mbz">
- 八级
- </li>
- </ul>
- </div>
- </body>
- </HTML>
来源: http://www.qdfuns.com/note/34695/ddf6bfe6f792c2fa781693c4af5ff02c.html