<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a{width: 100px;height: 40px;background: red;position: absolute;top: 50%;left: 50%;margin: -15px 0 0 -50px;}

a:before,
a:after{
content: "";
border-top: 42px solid transparent;
position: absolute;
top: -2px;
}
a:before{
border-right: 15px solid red;
left: -15px;
}
a:after{
border-left: 15px solid red;
right: -15px;
}
</style>
</head>
<body>
<a href="javascript;;"></a>
</body>
</html>

利用after和before伪类实现chrome浏览器tab选项卡斜边纯css无图制作笔记的更多相关文章

  1. 利用:before和:after伪类制作类似微信对话框

    今天学到了怎么做一个小三角形,进而结合其他属性把类似微信对话框的图形做出来了. 先做出如下形状: .arrow { width: 30px; height:30px; border-width:20p ...

  2. CSS3(各UI元素状态伪类选择器受浏览器的支持情况)

    选择器 Firefox Safari Opera IE Chrome E:hover Y Y Y Y Y E:active Y Y Y N Y E:focus Y Y Y Y Y E:enabled ...

  3. chrome浏览器tab页内存占用变大，网站变慢为哪般？

    问题概述: 公司做的是BS应用. 之前我们的后台服务器程序是带状态的,用ehcache存储登录状态:这两天被我改成了redis存储,应用本身不再存储登录状态. 然后自测,我在测试某个很耗时间的网页操作 ...

  4. 巧妙利用before和after伪类实现文字的展开和收起

    需求:一段文字,当收起的时候,显示4行,并且多余4行的部分用省略号表示,关键是在省略号前面留有空白部分来放一些图标等东西:展开的时候,全部显示. 例如下面的示例图: 收起的时候: 展开的时候: 在不用 ...

  5. 利用:before和:after伪类制作CSS3 圆形按钮 含demo

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到演示地址哦): 制作步骤: 一 ...

  6. 使用基于关系的选择器和伪类选择器创建纯CSS无JavaScript的鼠标移动到上面即可显示的下拉菜单

    html代码: <div class="menu-bar"> <ul> <li> <h3 class="text-warning ...

  7. 禁止chrome浏览器的缓冲图片以及css等资源文件

    今天做了一个动画的效果,在ff下正常 但是到了谷歌下就不正常了,非常郁闷,看了下是缓存的问题 ,于是度娘了一下发现清理缓存的技巧还是满多的,这里借鉴一下别人的总结,人的大脑有限,下次忘记的时候还可以在 ...

  8. 兼容IE6-9,FF,Chrome的box-shadow效果（纯CSS）

    昨天由于工作关系,遇上了这个问题,苦恼一日无解——残念. 所幸终于在今天早上得到了解决,遗憾的是灵活性不够强,不能根据内容自适应,要配合JS才能达到自适应效果 不过总结到这里已经很满意了,毕竟规律已经 ...

  9. Chrome 浏览器默认样式覆盖自己 CSS 样式的解决

    检查 HTML 源代码,DOCTYPE 的声明是否写正确. HTML5 的 DOCTYPE 声明规范: <!DOCTYPE html> 参考链接: css - User agent sty ...

随机推荐

  1. BFS与DFS模板

    搜索问题的解法 DFS(深度优先搜索) BFS(广度优先搜索) backtracking(回溯) DFS模板 void dfs(...) { // 结束递归的条件 if (...) { ..... / ...

  2. C#封装成DLL，并在C#中调用

    一.C#封装成DLL 1.在VS中创建项目选择类库,命名 myDll 2.建立好项目后自动生成的代码如下: 代码修改如下,添加自己要封装的C#代码,注意修饰符必须为public using Syste ...

  3. Trie树检索字符串

    #include <stdio.h> #include <stdlib.h> #include <string.h> typedef struct TrieNode ...

  4. js中获取宽高

    <script type="text/javascript"> function getWH() { var a = ""; a += " ...

  5. robot Framework选择单选框

  6. 利用redis实现elasticsearch入库去重

    背景 公司有一个业务场景,数据库的修改需要同步到Elasticsearch里,但是该场景的修改频率有点高,经常会出现一条记录短时间内多次的变化,如果每次变化都作为一次ES同步任务,那ES肯定是受不住的 ...

  7. Arduino Yun高速新手教程（大学霸内部资料）

    Arduino Yun高速新手教程(大学霸内部资料) 本资料为国内第一本Arduino Yun教程.具体解说Arduino Yun的基本结构.开发环境.系统配置.并着力解说关键功能--Bridge.最 ...

  8. Codeforces Round #269 (Div. 2) B. MUH and Important Things

    It's time polar bears Menshykov and Uslada from the zoo of St. Petersburg and elephant Horace from t ...

  9. win10怎样开启自带虚拟机

    win10和win8一样.都有自带的虚拟机,可是功能没有一安装上就打开,非常多喜欢用自带的东西,那么win10自带的虚拟机怎样开启呢? 首先要找到控制面板,我们右键点击開始button,我们找到&qu ...

  10. Registry Connect failed，Windows服务诊断

    Message:Connection failed for 192.168.32.38_e-futrueserer. Details:Windows Registry Datasource: Regi ...