DIV+CSS制作斜线效果记录
2024-10-20 04:07:28
DIV+CSS 斜线效果很简单,只需设置一下CSS Border 的边框就能有斜线效果。代码分享给大家,你可以自己变通。
提示要注意两点:1、DIV宽高的定义。2、DIV在 IE6 中默认是有高度的。
上图右边是我们要实现的效果,代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
|
<div id= "box" ></div> <style type= "text/css" > #box{ width : 0px ; height : 0px ; border : 40px solid #000 ; border-top-color : #930 ; border-bottom-color : #0C3 ; border-left-color : #FC0 ; border-right-color : #009 ; } </style> |
在FF IE7 IE8 都显示正常,但在IE6中,却如上图左边所示,中间有差距,因此,需要加一行:
line-height:0px;
最终代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<div id= "box" ></div> <style type= "text/css" > #box{ width : 0px ; height : 0px ; border : 40px solid #000 ; border-top-color : #930 ; border-bottom-color : #0C3 ; border-left-color : #FC0 ; border-right-color : #009 ; line-height : 0px ; } </style> </head> |
最新文章
- css的padding
- 【转】HiveQL:对数据定义的学习
- JAVA里面的IO流(二)方法1、输入流
- .net config文件 配置类的集合
- 边工作边刷题:70天一遍leetcode: day 83
- 面向过程部分 Java 和 C++ 的区别
- 优化SQL Server数据库查询方法
- hibernate级联保存,更新个人遇到的问题
- redis主从 哨兵
- php simple_html_dom 一个iconv错误引起解析中断的问题,貌似内存溢出
- Swift Array copy 的线程安全问题
- centos6.9 升级内核版本
- [Swift]LeetCode248.对称数 III $ Strobogrammatic Number III
- (DP) 关于最优三角剖分
- 1.2 eigen中矩阵和向量的运算
- xpath获取带注释的text
- GCT之数学公式(几何部分)
- git连接报错:Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password)
- CentOS7.5最小化安装之后的配置
- flex tooltip css
热门文章
- java的reflection
- 使用 virt-install 创建虚拟机
- 3dContactPointAnnotationTool开发日志(二八)
- 使用ASP.NET Identity 实现WebAPI接口的Oauth身份验证
- App流量测试--使用安卓自身提供的TCP收发长度统计功能
- JavaScript 保留两位小数
- HDU4786_Fibonacci Tree
- 基本数据类型用 == 判断的是值 ,对象用 == 判断的是地址 , 判断值的话用 equals()
- 【uoj#282】长度测量鸡 结论题
- android面试(5)---SQL数据库