<!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. loadrunner负载测试实例

    回想起第一次做性能测试,感慨万千,故写下本文,从:设置虚拟用户,设置场景以及分析运行结果三个方面进行阐述 硬件环境:硬盘 1TG,cpu 3.40GHz,内存4G 软件环境:IE9.0,Weblogi ...

  2. saybyeto2015

    不知不觉一年又结束了,还是打算在最后一天写个总结. 今年换了工作,改变不可谓不多. 技术方面,看的书主要是 <Angularjs权威指南> <JavaScript设计模式与开发实践& ...

  3. MVC Actionlink 参数说明

    Html.ActionLink用于输出链接,以下是带参数的例子: @Html.ActionLink("编辑", "Edit", new {id= "1 ...

  4. NHibernate系列文章二：创建NHibernate工程

    摘要 这篇文章介绍了如何创建一个简单的使用NHibernate的控制台应用程序,包括使用NuGet.简单的配置.单表映射.对NHibernate配置文件添加智能提示.使用ISessionFactory ...

  5. （知识分享）软硬件调试九法：第九条规则 如果你不修复一个bug，它将永远 存在

    1.查证问题确已被修复 如果遵循了“制造失败”这条规则,就知道如何验证你确实修复了问题.无论问题和修复看起来多么明显,你都无法保证修复是有效的,直到做了测试并验证. 2.查证确实你的修复措施解决了问题 ...

  6. 利用 Gulp 处理前端工作流程

    最近做项目,因为每次做完后都要手动压缩CSS.JS 等文件,压缩后另存为 *.min.xxx. Less 还要手动输入命令进行编译,调整页面也经常要手动刷新页面看效果,很麻烦,就尝试用 gulp 去处 ...

  7. Python延迟打印字符

    我想让python打印类似“正在加载...”,每个句号打印出来与它们之间的睡眠时间0.5秒间隔 实现方法: 1 2 3 4 5 6 7 8 9 10 11 #!/bin/env python # -* ...

  8. 【原】JS正则表达式里的控制符

    正则表达式易于使用而又让人费解,乍一看上去,就像是一行行的乱码,但是它的功能确实又不容小觑.今天整理正则时,纠正了自己的一个误解. 先缕一缕: 正则表达式的两种声明方式: 字面量.构造器 (RegEx ...

  9. anomaly detection algorithm

    anomaly detection algorithm 以上就是异常监测算法流程

  10. js中函数的定义