<!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. CAD-强电常用符号集

  2. [React] How to use a setState Updater Function with a Reducer Pattern

    In this lesson we'll walk through setting up an updater function that can receive an action argument ...

  3. 【C++ Primer每日刷】之三 标准库 string 类型

    标准库 string 类型 string 类型支持长度可变的字符串.C++ 标准库将负责管理与存储字符相关的内存,以及提供各种实用的操作.标准库string 类型的目的就是满足对字符串的一般应用. 与 ...

  4. 小P寻宝记——好基友一起走

    小P寻宝记--好基友一起走 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描写叙述 话说.上次小P到伊利哇呀国旅行得到了一批宝藏.他是 ...

  5. 有关计数问题的DP 划分数

    有n个无差别的物品,将它们划分成不超过m组.求出划分方法数模M的余数. 输入: 3 4 10000 输出: 4(1+1+2=1+3=2+2=4) 定义:dp[i][j] = j的i划分的总数 #inc ...

  6. 使用Android Studo开发NDK之Gradle的配置(能debug C代码)

    配置: 用的版本号是AS1.5(也能够尝试更高版本号). Gradle地址是distributionUrl=https\://services.gradle.org/distributions/gra ...

  7. bzoj1790: [Ahoi2008]Rectangle 矩形藏宝地

    被统考草翻回来做题不太行啊,线段树和cdq都写挂细节 这题大概就是四维偏序吧,欸n怎么到了20w,只能水70啊 但是这个好像只要有1个在里面就可以ans就可以++了耶 突然想到高中奥数老师说的,大概是 ...

  8. c++面向对象程序设计 谭浩强 第二章答案

    类体内定义成员函数 #include <iostream> using namespace std; class Time { public: void set_time(); void ...

  9. pyspider architecture--官方文档

    原文地址:http://docs.pyspider.org/en/latest/Architecture/ Architecture This document describes the reaso ...

  10. PHP 环境搭建工具

    PHP环境搭建工具 一键集成工具 直接安装后部署到相关目录即可浏览 phpStudy 下载地址:https://pan.baidu.com/s/1i6C3Ph7