快捷导航
蚂蚁部落 网站首页 实例代码 CSS3实例 查看内容

CSS 平行四边形导航菜单

2017-5-17 10:45| 发布者: admin| 查看: 213| 评论: 1|来自: 蚂蚁部落

分享一段代码实例,它利用css实现了平行四边形效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="author" content="http://www.softwhy.com/" />
  <title>蚂蚁部落</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      background: #00868B;
    }

    .main {
      width: 90%;
      margin: 0 auto;
      margin-top: 50px;
    }

    .meun-button,
    .first-button,
    .last-button {
      position: relative;
      display: inline-block;
      border: 0;
      background: transparent;
      width: 12%;
      margin-right: 1%;
      padding: 0.5em 0em;
      text-align: center;
      color: white;
      text-transform: uppercase;
      text-decoration: none;
      font: bold 150%/1 sans-serif;
      cursor: pointer;
    }

    .meun-button::before,
    .first-button::after,
    .last-button::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      background: #473C8B;
      transform: skew(-25deg);
    }

    .last-button::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 20px;
      right: -11px;
      z-index: -1;
      background: #473C8B;
    }

    .first-button::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: -11px;
      right: 20px;
      z-index: -1;
      background: #473C8B;
    }

    .meun-button:hover::before,
    .last-button:hover::before,
    .first-button:hover::after,
    .first-button:hover::before,
    .last-button:hover::after {
      background: #1C86EE;
    }
  </style>
</head>

<body>
  <div class="main">
    <a class="first-button">1</a>
    <a class="meun-button">2</a>
    <a class="meun-button">3</a>
    <a class="meun-button">4</a>
    <a class="meun-button">5</a>
    <a class="meun-button">6</a>
    <a class="last-button">7</a>
  </div>
</body>

</html>

鲜花

握手

雷人

路过

鸡蛋
发表评论

最新评论

引用 TWang 2017-5-17 13:37
支持

查看全部评论(1)

关于我们|手机版|小黑屋| 蚂蚁部落 ( 鲁ICP备10022556号-3 )

GMT+8, 2017-6-25 04:49 , Processed in 0.063760 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部