<!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. C++基础 (9) 第九天 编译器对模板类的二次编译 类模板 自定义数组类

    1 昨日回顾 2 编译器对于模板的二次编译 写一个模板函数 然后进行调用 g++ template.cpp -o template // 汇编 g++ -S template.cpp –o templ ...

  2. sessionStorage与clone方法在项目中的应用

    //资料列表: //JSON.parse(jsonstr); //json格式字符串转换成json对象 //JSON.stringify(jsonobj); //json对象转换成json格式字符串 ...

  3. ajax提交数据遇到400异常，原因及解决方案

    开发中遇到的问题, ajax的URL写的正确但是确无法正常跳转, 开发者模式下显示请求400异常. 前后台代码如下 ------------------------------------------ ...

  4. Forge.autodesk平台的使用

    看了下面的这个网址的教程,发现其中的curl在git集成的shell中不好用,反复尝试后发现,&后面是没有空格的,记录下 https://forge.autodesk.io/

  5. 【WaaCaa】一款开源科学作图/数据可视化工具 —— 诞生篇

    作为一个理工男.用过了形形色色能够用于科学作图/数据可视化软件:从大学时做实验课推荐用于分析简单採集数据的 Origin; 毕业论文时用来呈现实验时序信号和离线分析脑电信号的 MATLAB.后面还发现 ...

  6. Linux体验之旅（一）——制作U启，安装rhel-server-6.3

    U启制作: 双击UltraISO: 点击文件→打开: 选择rhel-server6.3 点击启动→选择写入硬盘映像 最后选择格式化优盘→写入→完毕 注意:启动盘制作完毕后一定记得将rhel-serve ...

  7. Sublime text3 Emmet使用

    Emmet需要配置pyv8 进入 https://github.com/emmetio/pyv8-binaries 下载解压文件放入Sublime Installed Packages下面 就可以使用 ...

  8. java.security.AccessControlException: access denied ("java.lang.RuntimePermission" "getClassLoader")

    转自:https://blog.csdn.net/bluecard2008/article/details/80921682?utm_source=blogxgwz0 摘要: 今天在使用jetty做容 ...

  9. nginx的安装步骤

    nginx学习资料;https://zhuanlan.zhihu.com/p/34943332 1.下载nginx的安装包:https://nginx.org/en/download.html 2. ...

  10. batch normalization学习理解笔记

    batch normalization学习理解笔记 最近在Andrew Ng课程中学到了Batch Normalization相关内容,通过查阅资料和原始paper,基本上弄懂了一些算法的细节部分,现 ...