[首页]
[文章]
[教程]
首页
Web开发
Windows开发
编程语言
数据库技术
移动平台
系统服务
微信
设计
布布扣
其他
数据分析
首页
>
Web开发
> 详细
用CSS代码绘制三角形 纯CSS绘制三角形的代码
时间:
2015-12-08 17:31:09
阅读:
226
评论:
0
收藏:
0
[点我收藏+]
1、新建一个元素,随便什么元素,不过我习惯性的会用块元素来做。如果行内元素就display:block它。
<div class="triangle"></div>
2、把它的宽高设置为height:0px; width:0px;
3、设置边框border属性,用来实现三角形。
首先要了解border具体是怎么样的,我写了一个这样的样式:
border:50px solid #000; border-color:#f00 #000 #f0f #00f;
在FF下面显示效果如下:
出现4个三角形合并成一个正方形。到这里就很清晰了,只要把想要的保留,其它的设置为透明就可以达到三角形的效果,那么:
border:50px solid #000; border-color:#f00 transparent transparent transparent;
在FF就可以看到一个红色三角形如下:
但是IE呢,尤其是坑爹的IE6会怎样? 如图:
这是因为它不支持transparent,所以不会透明,那么可以这样:
border:50px solid #000; border-color:#f00 transparent transparent transparent; border-style:solid dashed dashed dashed;
在你想它透明的地方对应的把border-style设置为dashed,IE6就可以达到跟FF一样的效果了。
那这样也就只是实现了4个方向的三角形,那如果要直角对着45斜线方向的呢?那么可以用两个正方向的三角形并在一起来实现,如下图:
代码:
border:50px solid #000; border-color:#f00 #000 transparent transparent; border-style:solid solid dashed dashed;
只要把颜色统一,就形成一个45斜线方向三角形,而在IE6却会是这样一种显示:
这是因为IE6有个行高撑开了,把行高设置为0就跟FF一样了:line-height:0px;
最终演示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>用CSS画三角形</title> <style type="text/css"> *{ margin:0px; padding:0px;} .triangle{ display:block; height:0px; width:0px; border:50px solid #000; border-color:#f00 #000 transparent transparent; border-style:solid solid dashed dashed; line-height:0px;} </style> </head> <body> <div class="triangle"></div> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href=‘http://www.veryhuo.com/‘ target=‘_blank‘>http://www.jb51.net/</a></div>
提示:您可以先修改部分代码再运行
用CSS代码绘制三角形 纯CSS绘制三角形的代码
原文:http://www.jb51.net/css/54994.html
踩
(
0
)
赞
(
0
)
举报
评论
一句话评论(
0
)
登录后才能评论!
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
2021/09/28 scripts
2022-05-27
vue自定义全局指令v-emoji限制input输入表情和特殊字符
2022-05-27
9.26学习总结
2022-05-27
vim操作
2022-05-27
深入理解计算机基础 第三章
2022-05-27
C++ string 作为形参与引用传递(转)
2022-05-27
python 加解密
2022-05-27
JavaScript-对象数组里根据id获取name,对象可能有children属性
2022-05-27
SQL语句——保持现有内容在后面增加内容
2022-05-27
virsh命令文档
2022-05-27
教程昨日排行
更多>
1.
list.reverse()
2.
Django Admin 管理工具
3.
AppML 案例模型
4.
HTML 标签列表(功能排序)
5.
HTML 颜色名
6.
HTML 语言代码
7.
jQuery 事件
8.
jEasyUI 创建分割按钮
9.
jEasyUI 创建复杂布局
10.
jEasyUI 创建简单窗口
友情链接
汇智网
PHP教程
插件网
关于我们
-
联系我们
-
留言反馈
- 联系我们:wmxa8@hotmail.com
© 2014
bubuko.com
版权所有
打开技术之扣,分享程序人生!