css实现栏目两边斜线的效果
实现效果：
具体实现代码：
<!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实现栏目两边斜线的效果的更多相关文章
- 三角形变形记之纯css实现的分布导航条效果
三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...
- css的img移上去边框效果及CSS透明度
css的img移上去边框效果: .v_comment img{ height:36px; height:36px; float:left; padding:1px; margin:2px; borde ...
- 纯CSS实现各类气球泡泡对话框效果
原文 纯CSS实现各类气球泡泡对话框效果 一.关于纯CSS实现气泡对话框 首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一 ...
- 简单css实现input提示交互动画效果
通过基础CSS实现输入提示交互动画效果,并兼容各浏览器! 1.效果展示 2.css代码 h4 { margin: 30px 0; } input { margin:; font-size: 16px; ...
- 使用CSS定位元素实现水平垂直居中效果
总结一下平时使用CSS技巧使元素达到水平居中效果 相对定位(或绝对定位)实现水平垂直居中: element{ position:relative; /*这个属性也可以是absolute*/ width ...
- 一款纯css实现的垂直时间线效果
今天给大家分享一款纯css实现的垂直时间线效果.垂直时间线适合放在类似任务时间安排的网页上.该实现采用了蓝色作为主题色,界面效果还不错.一起看下效果图: 实现的代码. html代码: ... 阅读原文 ...
- css设置背景固定不滚动效果的示例
css设置背景固定不滚动效果的示例 背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背 ...
- CSS鼠标悬停图片加边框效果，页面布局发生错位的解决办法
CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...
- HTML+CSS之光标悬停图片翻转效果
设计思路: 首先做一个包括图片和说明文字的简单的页面结构,然后再设置它的变换.将变换的元素,即照片和文字放在一个父容器里面,这就需要四个父容器 ,再将这四个父容器放在最外层的舞台上面进 ...
随机推荐
- shift + 空格 快捷键 使输入法 在全角和半角直接切换。。 但是全角输入一个 空格 ，会造成jsp页面 无法正常解析。。比如 无法获得参数。。
shift + 空格 快捷键 使输入法 在全角和半角直接切换.. 但是全角输入一个 空格 ,会造成jsp页面 无法正常解析....比如 无法获得参数.. 如 <form action=" ...
- C语言dos程序源代码分享（进制转换器）
今天给大家分享一个dos程序的源代码 这个程序是本人在学习中的经验分享 如果有问题或者建议,欢迎大家一起交流 源代码: /*本程序为一个进制转换器 本程序不作为商业用途,完全为技术交流 喜欢C语言的同 ...
- 修改BUG心得
修改BUG心得 分类: 项目管理/CMMI2013-01-14 22:06 845人阅读 评论(0) 收藏 举报 目录(?)[-] 一 二 三 一. 1.写第一版时就杜绝这些的发生. 2.思维要开 ...
- 2018.10.19 NOIP训练 变化的序列（线性dp）
传送门 f[i][j]f[i][j]f[i][j]表示后iii个对答案贡献有jjj个a的方案数. 可以发现最后a,ba,ba,b的总个数一定是n∗(n−1)/2n*(n-1)/2n∗(n−1)/2 因 ...
- 2018.10.16 spoj Can you answer these queries V（线段树）
传送门 线段树经典题. 就是让你求左端点在[l1,r1][l1,r1][l1,r1]之间,右端点在[l2,r2][l2,r2][l2,r2]之间且满足l1≤l2,r1≤r2l1\le l2,r1 \l ...
- phoneGap,angularJs,onSen的一些备忘
1.ng-click="funcName";这里的funcName需要再控制器里的$scope.funcName=function(){}进行定义 2.ng-controller= ...
- [docker]mesos集群的启动脚本
宿主机的IP地址列表 mesos-lb:192.168.253.159 mesos-marathon:192.168.253.159 mesos-master:192.168.253.159 meso ...
- docker入门实战
基本概念 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上. Docker是一个重新定义了程序开发测试.交付和 ...
- QGIS+GH + MapServer
拒绝描图,如何利用GH+QGIS完爆场地底图?http://www.sohu.com/a/251004986_657084 拒绝描图--爬取OSM数据绘制底图 所用软件 RHINO+GH\QGIS\G ...
- 如何使用C++11实现C#属性概念设计
目录(原创博客,版权所有,转载请注明出处 http://www.cnblogs.com/feng-sc) 1.概述 2.C#属性的概念 2.1.简单示例代码介绍C#中的属性 2.2.C++实现效果 ...