利用纯css创建一个三角形_第1页
利用纯css创建一个三角形_第2页
利用纯css创建一个三角形_第3页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页中对话气泡框下边的小三角是非常有用的制的方法很多想什么字体图标小图片之类的都可以，但是都不够灵活和快捷，有了之绘制一个三角形就非常简单了利用纯创一三角形首先当然是一个任意的空标签来当小三角，下边的丢去即可：代码如:.triangle{left:50%;margin-left:-5px;background:#fafafa;bottom:-4px;-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);border:1pxsolidborder-top:none;border-left:none}代码利用的2d旋转属性对正方形进旋转且隐藏掉顶部左右两边的边框就可以实现小三角了。例子代码如:html><metacharset=utf-8><scripttype=text/javascript<title>三种纯实现三角形的&<link<styletype=text/css>{padding:8pxbackground:#fcea9e;#b6bac0;font:normal16px}h1{float:left;}{font-weight:bold;color:#222;}.return-article{float:right;}.return-articledisplay:inline;}拟tips*/{position:relative;float:left;00width:240px;

height:60px;line-height:60px;2pxborder:1pxsolid#c9e9c0;}.triangle-border{position:absolute;left:30px;height:0;border-style:soliddasheddasheddashed;}{border-color:#c9e9c0transparent}.tb-background{}/*字符模拟tips*/.triangle-character{position:absolute;left:30px;height:26px;font:normal26px宋;}.tc-background{bottom:-12px;}.tc-border{color:#c9e9c0;}/*css3模拟tips*/{bottom:-8px;bottom:-6px;overflow:hidden;height:13px;border-right:1px#c9e9c0;}.transform{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);}{m12=-0.7071067811865477,m21=0.7071067811865477,m22=0.7071067811865475,sizingmethod='autoprogid:dximagetransform.microsoft.matrix(m11=0.7071067811865475,m12=-0.7071067811865477,m21=0.7071067811865477,m22=0.7071067811865475,sizingmethod='autoexpand');}</style></head><body><divclass=message-box><span>我利用属实现&<divtb-border></div><divtb-background></div></div><divclass=message-box><span>我利用◆字实&<divclass=triangle-charactertc-border></div><divclass=triangle-charactertc-background>◆</div><divclass=message-box><span>我利用css属实现的&<

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论