实现效果：

具体实现代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .wrapper {

                text-align: center;

                border-top: 1px solid #eee;

                margin-top: 50px;

            }

            .tabs {

                display: inline-block;

                text-align: center;

                border-bottom: solid 1px #eee;

                background: #fff;

                margin-top: -1px;

                padding: 0 64px;

                position: relative;

            }

            .tabs > a {

                display: inline-block;

                line-height: 44px;

                color: #aaaaaa;

                font-size: 14px;

                font-weight: bold;

                letter-spacing: 1px;

                text-decoration: none;

                padding: 0 26px;

                position: relative;

            }

            .tabs .left-line {

                content: "";

                position: absolute;

                top: 0px;

                left: -1px;

                bottom: 0;

                border-top: 45px solid transparent;

                border-left: 45px solid #eee;

            }

            .tabs .left-line:before {

                content: "";

                position: absolute;

                left: -48px;

                bottom: 0;

                border-top: 45px solid transparent;

                border-left: 45px solid #fff;

            }

            .tabs .right-line {

                position: absolute;

                right: -1px;

                top: 0;

                border-bottom: 45px solid #eee;

                border-left: 45px solid transparent;

                content: "";

            }

            .tabs .right-line:before {

                position: absolute;

                right: -2px;

                top: 0;

                border-bottom: 45px solid white;

                border-left: 45px solid transparent;

                content: "";

            }

        </style>

    </head>

    <body>

        <div class="wrapper">

            <div class="tabs">

                <span class="left-line"></span>

                <a href="javascript:;" >栏目一</a>

                <a href="javascript:;" >栏目二</a>

                <span class="right-line"></span>

            </div>

        </div>

    </body>

</html>

css实现栏目两边斜线的效果的更多相关文章

  1. 三角形变形记之纯css实现的分布导航条效果

    三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...

  2. css的img移上去边框效果及CSS透明度

    css的img移上去边框效果: .v_comment img{ height:36px; height:36px; float:left; padding:1px; margin:2px; borde ...

  3. 纯CSS实现各类气球泡泡对话框效果

    原文 纯CSS实现各类气球泡泡对话框效果 一.关于纯CSS实现气泡对话框 首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一 ...

  4. 简单css实现input提示交互动画效果

    通过基础CSS实现输入提示交互动画效果,并兼容各浏览器! 1.效果展示 2.css代码 h4 { margin: 30px 0; } input { margin:; font-size: 16px; ...

  5. 使用CSS定位元素实现水平垂直居中效果

    总结一下平时使用CSS技巧使元素达到水平居中效果 相对定位(或绝对定位)实现水平垂直居中: element{ position:relative; /*这个属性也可以是absolute*/ width ...

  6. 一款纯css实现的垂直时间线效果

    今天给大家分享一款纯css实现的垂直时间线效果.垂直时间线适合放在类似任务时间安排的网页上.该实现采用了蓝色作为主题色,界面效果还不错.一起看下效果图: 实现的代码. html代码: ... 阅读原文 ...

  7. css设置背景固定不滚动效果的示例

    css设置背景固定不滚动效果的示例 背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背 ...

  8. CSS鼠标悬停图片加边框效果，页面布局发生错位的解决办法

    CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...

  9. HTML+CSS之光标悬停图片翻转效果

    设计思路:         首先做一个包括图片和说明文字的简单的页面结构,然后再设置它的变换.将变换的元素,即照片和文字放在一个父容器里面,这就需要四个父容器 ,再将这四个父容器放在最外层的舞台上面进 ...

随机推荐

  1. part1:3-VMware及redhat enterprise Linux 6 的安装

    创建虚拟机PC FILE->NEW Virtual machine->custom(自定义,定制)->...->I WILL INSTALL THE OS LATER-> ...

  2. mysql数据库中如何查询日期在两个时间之间的关系

    select * from banner where addDate between '2017-06-04' and '2017-06-06';

  3. 2018.10.01 bzoj3237: [Ahoi2013]连通图（cdq分治+并查集）

    传送门 cdq分治好题. 对于一条边,如果加上它刚好连通的话,那么删掉它会有两个大集合A,B.于是我们先将B中禁用的边连上,把A中禁用的边禁用,再递归处理A:然后把A中禁用的边连上,把B中禁用的边禁用 ...

  4. phalApi数据库操作

    在很多时候,我们会遇到数据库表里面的某个值需要+1操作,我们不能简单地在update的时候写入array('key' => 'key+1'),因为在解析sql的时候,key+1 会带上引号作为一 ...

  5. origin里用c语言编程

    学习自白东升老师的origin8.0课程. 其实是originC语言.origin中大多绘图和处理功能都是originC语言完成的,可以同时按下ctrl和shift然后点击相应的功能,就会出现每个按钮 ...

  6. HDU 2546 饭卡 （01背包问题）

    题意:中文的吧,飘过~ 析:学过DP的都应该感觉到是动态规划吧,就是一个01背包问题,不同的是,这个题又加入一些新的条件,就是不满5元不能消费,过了5元即使超了也行(这个学校真不错,都可以预支),最后 ...

  7. csdn获得积分

    常规方式获取可用分 1.每天只要回复就可以获得10个可用分.注:回复后的第2天发放. 2.每周回复量大于10个帖子,将获得30可用分.注:下一周的周二发放. 3.本周获得技术专家分30分以上,将获得4 ...

  8. PHP数据库抽象层--PDO（PHP Data Object） [一]

    1.简介:(PDO数据库访问抽象层,统一各种 数据库的访问接口 ) PHP 数据对象 (PDO) 扩展为PHP访问数据库定义了一个轻量级的一致接口.实现 PDO 接口的每个数据库驱动可以公开具体数据库 ...

  9. mac与win7（台式电脑）共享文件

    人生处处又都坑,自己走过了,所以记下来. mac共享文件,win7访问: 1.系统偏好设置-共享-都选中就行.一般都会这样说. 2.系统偏好设置-用户与群组-解锁-客人用户-允许客人用户连接到共享文件 ...

  10. linux系统编程之管道（三）：命令管道（FIFO)

    一,匿名管道PIPE局限性 管道的主要局限性正体现在它的特点上: 只支持单向数据流: 只能用于具有亲缘关系的进程之间: 没有名字: 管道的缓冲区是有限的(管道制存在于内存中,在管道创建时,为缓冲区分配 ...