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之光标悬停图片翻转效果
设计思路: 首先做一个包括图片和说明文字的简单的页面结构,然后再设置它的变换.将变换的元素,即照片和文字放在一个父容器里面,这就需要四个父容器 ,再将这四个父容器放在最外层的舞台上面进 ...
随机推荐
- 简明PR教程
注意:本文供培训使用且仅为第一版 作者也不打算继续更新 本篇文章最早是在为内部培训时所编写的文章 有些疏漏且没有进行校正等工作 我尽力用最简单通俗的语言给大家介绍PR的使用方法 简明PR教程 1.编辑 ...
- android 网站上下的 adt 不能显示没有安装的
问题描述 使用SDK Manager更新时出现问题Failed to fetch URL https://dl-ssl.google.com/android/repository/repository ...
- hdu-1131（卡特兰数+大数）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1131 思路:R(x)=h(x)*n!=C(n,2*n)*n!=A(n+2,n*2); #include ...
- C++之类和对象的使用（二）
析构函数 析构函数的作用并不是删除对象,而是在撤销对象占用的内存之前完成一系列清理工作,使这部分内存可以被程序分配给新对象使用.对象生命周期结束,程序就自动执行析构函数来完成这些工作. 析构函数是一种 ...
- （KMP 字符串处理）Substrings -- hdu -- 1238
http://acm.hdu.edu.cn/showproblem.php?pid=1238 Substrings Time Limit:1000MS Memory Limit:32768KB ...
- MeshLab编译理解
1.安装QT5.7,VS2013,QT_VA_Addin (涉及3D模型处理,采用64bit编译,且分为两种debug,release方式) 2.下载VCGlib库,放在meshlab的同级目录 (因 ...
- C++主流编译器整理（编译器版本--供应商--C++11支持情况）
C++标准 年份 C++标准 俗称 备注 2011 ISO/IEC 14882:2011 C++11 第三个C++标准 2007 ISO/IEC TR ...
- Date日期操作
获取年月日时分秒: package com.util; import java.text.DateFormat; import java.util.Calendar; import java.util ...
- adb命令行输出logcat日志
输出到终端: adb logcat 输出到指定文件:如log.txt adb logcat > log.txt 输出到指定文件并带上日志产生时的系统时间(个人感觉实用的): adb logcat ...
- Linq的基本用用法
Linq 的基本用法: Sort , OrderBy, Skip,Take,Where,Compare,Join,Distinct ,InsertRange 等关键词 Select用法 var sel ...