<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS输出图形</title>
<style type="text/css">
  .square{width:100px;height:100px;background-color:#FFF;position:relative;border:2px #000000 solid;}
.square:before{
content:"";
width:0px;
height:0px;
display:block;
position:absolute;
z-index:2;
top:25%;
right:-28px;
border:15px solid #FFF;
border-color:transparent transparent transparent #FFF;
}
.square:after{content:"";
width:0px;
height:0px;
display:block;
position:absolute;
z-index:1;
top:25%;
right:-30px;
border:15px solid #FFF;
border-color:transparent transparent transparent #000;
}
.a{width:0;height:0;border:40px solid; border-color:transparent transparent transparent #F00;}
</style>
</head>
<body>
       
   <div class='square'></div>
   <div class="a"> </div>
</body>
</html>

css伪类运用的更多相关文章

  1. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  2. CSS 伪类 (Pseudo-classes)

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...

  3. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  4. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  5. CSS 伪类

    Link The :link CSS pseudo-class lets you select links inside elements. This will select any link whi ...

  6. CSS伪类

    CSS伪类:控制元素的某种状态 语法:元素名称:伪类名称{属性:值} CSS伪类控制链接状态 状态 语法 未访问的链接 a:link{color:#ff00ff} 已访问的链接 a:visited{c ...

  7. 应用越来越广泛的css伪类

    说起css伪类,学习web前端网页设计的同学们应该对此应该不是很陌生,以前很多的网页的特效大多是通过js来实现的.但是随着CSS3不断开发,利用css实现网页的特效不仅响应不错,而且还减少了很多的代码 ...

  8. (五)CSS伪类(Pseudo-class)

    CSS伪类用于向某些选择器添加特殊的效果.伪类的语法如下: selector : pseudo-class {property: value} CSS类也可以与伪类搭配使用: selector.cla ...

  9. 关于CSS伪类选择器

    #CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...

  10. jquery 文字向上滚动+CSS伪类before和after的应用

    汇总常用技巧——CSS伪类before和after的应用 先上效果图,建议遵循有图有真相的原则,可以上图的地方,还望不要嫌麻烦,毕竟有图的话 可以让读者少花些时间! <!DOCTYPE html ...

随机推荐

  1. C++ 创建和遍历二叉树

    一个简单的创建和遍历二叉树的C++程序,二叉树的其他操作程序待更新. #include <iostream> using namespace std; struct BiTNode{ ch ...

  2. 手机刷机软件与ROM的盈利模式分析

    一. 智能手机的兴起不过短短几年时间,更新迭代已经让实体键盘成为回忆.智能手机带来的是人们生活习惯的改变,对于手机的重度依赖,是好是坏不去评价.智能手机相对于之前的手机最大的改变不仅仅是屏幕的飞速变大 ...

  3. python sort和sorted的区别以及使用方法

    iteralbe指的是能够一次返回它的一个成员的对象.iterable主要包括3类: 第一类是所有的序列类型,比如list(列表).str(字符串).tuple(元组). 第二类是一些非序列类型,比如 ...

  4. java基础八 ［序列化和文件的输入/输出］（阅读Head First Java记录）

    对象具有状态和行为两种属性.行为存在类中的方法中,想要保存状态有多种方法,这里介绍两种: 一是保存整个当前对象本身(通过序列化):一是将对象中各个状态值保存到文件中(这种方式可以给其他非JAVA程序用 ...

  5. ssh连接速度慢解决

    这些天,公司新安装的几台服务器,发现SSH本地连接上去,速度非常慢,慢的难以忍受,大概30秒左右. 后来到网上查了下,尝试了一种办法,效果还可以,特发上来给大家共享. [root@data208 ~] ...

  6. Origin9.1如何使用原始数据（Raw Data）绘制风向玫瑰图

    核心提示:今天为大家简单介绍下如何使用原始数据绘制风向玫瑰图.本例以Origin 9.1进行演示.1.本例所用数据截图如下,列A为风向,列B为风速.2.选中两列数据,进入Plot下的Specializ ...

  7. 创建 XMLHttpRequest 对象

    var _createHttpRequest = function () { var obj; if (window.XMLHttpRequest) obj = new XMLHttpRequest( ...

  8. JS打印页面

         打印 整个html页面(PS:样式要写在页面里面才能打印(就是用内部样式))             <a id="dayi" runat="server ...

  9. TCP/ip协议栈之内核调优

    大并发带来服务器各种层出不穷的问题,我们要善用服务器系统内核,因为其性能优于用户态的玩意 注:若想永久保存参数,可将其加入到/etc/sysctl.conf中,执行sysctl -p使其永久生效,临时 ...

  10. C#数据库操作

    1.常用的T-Sql语句      查询:SELECT * FROM tb_test WHERE ID='1' AND name='xia'                SELECT * FROM ...