一般需求，圆角看起来更加舒服，但是下面直角略显生硬

于是设计师有了下面的需求，下面加上小凹型：

凹型？凹型？凹型？有点变态，这怎么实现...........

图片肯定是最先考虑到的，CSS实现有貌似有一定难度.......

别怕，咋们遇难而上，go go...

先上html结构，这个很简单,没什么可以说明的：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

    <title>css凹型导航</title>

</head>

<body>

<nav id="nav">

    <ul>

        <li>

            <div class="left"></div>

            <div class="con">导航1</div>

            <div class="right"></div>

        </li>

        <li>

            <div class="left"></div>

            <div class="con">导航2</div>

            <div class="right"></div>

        </li>

        <li>

            <div class="left"></div>

            <div class="con">导航3</div>

            <div class="right"></div>

        </li>

        <li>

            <div class="left"></div>

            <div class="con">导航4</div>

            <div class="right"></div>

        </li>

    </ul>

</nav>

</body>

</html>

　　再看CSS

#nav {

            background: #fff;

            border-bottom: 1px solid #7bd1ff;

            width: 960px;

            margin: 100px auto;

            height: 60px;;

        }

        #nav ul li {

            float: left;

            list-style: none;

            height: 60px;

            margin: 0 10px;

        }

        li * {

            float: left;

            transition: all .2s;

        }

        .con {

            width: 60px;

            height: 60px;

            line-height: 60px;

            text-align: center;

            background: #7bd1ff;

            border-radius: 10px 10px 0 0;

        }

　　　　　/*

　　　　　　设置凹型的尺寸，

　　　　　　通过margin定位

　　　　　*/

.left, .right {

 width: 7px; height: 7px; margin: 53px 0 0 0;

}

 　　　　　/*

　　　　　　下面的是关键，主要是用到了径向渐变 radial-gradient，

　　　　　　通过比例划分实现直接透明过度到背景色，没有渐变

　　　　　　测试结果显示 transparent 50% 并不能一半透明一半有颜色，70%+比较何时

　　　　　*/

.left { background: -webkit-radial-gradient(top left, circle, transparent 70%, #7bd1ff 30%); }

 .right { background: -webkit-radial-gradient(top right, circle, transparent 70%, #7bd1ff 30%); }

 li:hover .con { background: #2d85ff }

 li:hover .left { background: -webkit-radial-gradient(top left, circle, transparent 70%, #2d85ff 30%); }

 li:hover .right { background: -webkit-radial-gradient(top right, circle, transparent 70%, #2d85ff 30%); }

　　

　　so，这样，是不是也没有什么难度，轻松搞定。

CSS凹型导航按钮的更多相关文章

  1. ul、li实现横向导航按钮

    好久没写博客了,主要是懒得呼气都不想呼,上周分给我一个新的任务,就是自己新建一个系统,快速极限开发,虽然之前自己也做过小的系统,但毕竟是自己做,随着自己的心意做,没有做其他的限制等,现在呢是给公司做, ...

  2. sencha touch TabPanel 加入导航按钮(向左向右按钮) 以及Carousel插件(2014-11-7)

    Carousel插件代码: /* * TabPanel的Carousel功能插件 * 取至 * https://github.com/VinylFox/Ext.ux.touch.SwipeTabs * ...

  3. CSS 自适应导航菜单

    文章目录 以前我写了一篇关于如何为自适应网页制作教程手机导航菜单,现在我又摸索出一种无需JS脚本的自适应导航菜单,它采用纯粹的语义化HTML5标签来完成.该菜单可以左对齐,居中或右对齐,也不像上一种方 ...

  4. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  5. css横向导航条

    css横向导航条有两种方法 1. ul li a li{float:left} #navlist li, #navlist a{height:44px;display:block;} a{width: ...

  6. CSS之导航菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. css笔记——css 实现自定义按钮

    css实现自定义按钮的样式实际上很早就有了,只是会用的人不是很多,里面涉及到了最基础的css写法,在火狐中按钮还是会显示出来,这时需要将i标签的背景设置为白色,同时z-index设置比input高一些 ...

  8. CSS实现导航条Tab的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  9. iOS 添加导航按钮

    iOS设置导航按钮navigationBar中包含了这几个重要组成部分:leftBarButtonItem, rightBarButtonItem, backBarButtonItem, title. ...

随机推荐

  1. Eclipse远程提交hadoop集群任务

    文章概览: 1.前言 2.Eclipse查看远程hadoop集群文件 3.Eclipse提交远程hadoop集群任务 4.小结   1 前言 Hadoop高可用品台搭建完备后,参见<Hadoop ...

  2. Altium Designer极坐标布局方法

    1.键盘快捷组合 O+G,打开栅格管理器,点击左下角的“菜单”,在对话框中的选择“添加极坐标栅格”. 2.双击新添加的优先等级为1的栅格,在弹出的polar  grid editor 对话框中,对里边 ...

  3. Debian8 部署 laravel 5.3 (php7.0 + nginx)

    web根目录:/var/www/html 更换 apt-get 源cd /etc/apt/sources.listdeb http://ftp.debian.org/debian jessie mai ...

  4. git使用笔记（三）（图文说明） 图解提交更改内容的不同方式，涉及代码

    此步之前的工作和示例请参考以下帖子: git使用笔记(一)Git的下载与配置 git使用笔记(二) 如何把GitHub上项目同步到本地 -------------------------------- ...

  5. C++ string类及其函数的讲解

    文章来源于:http://www.cnblogs.com/hailexuexi/archive/2012/02/01/2334183.html C++中string是标准库中一种容器,相当于保存元素类 ...

  6. “#ifdef __cplusplus extern "C" { #endif”的定义

    平时我们在linux c平台开发的时候,引用了一些Cpp或者C的代码库,发现一些头文件有如下代码条件编译. #ifdef __cplusplus extern "C" { #end ...

  7. <转>十分钟学会javascript

    本文转自国外知名网站Learn X in Y minutes. 由于格式的限制无法直接将Markdown转贴过来,所以只能用Iframe的方式. 本文适合有一定编程基础又对Javascript感兴趣的 ...

  8. Codeforces 526E Transmitting Levels

    http://codeforces.com/contest/526/problem/E 题意:给一个环,每个点有权值,每次给一个数B,求把这个环切割成若干部分,每个部分不超过B,至少要切成几块? #i ...

  9. [LeetCode 121] - 买入与卖出股票的最佳时机(Best Time to Buy and Sell Stock)

    问题 假设你有一个数组,其中的第i个元素表示一只股票在第i天的价格. 如果只允许你完成一次交易(即买入并卖出股票一次),设计一个找出最大利润的算法. 初始思路 和122一样,基于买入与卖出股票的最佳时 ...

  10. About Adultism and why things ar the way they are

    About - Adultism About Adultism and why things ar the way they are In this page we will try to clari ...