栏目导航
热点推荐
- 3个简单却重要的CSS技巧
- css基础:熟悉了解盒子模型(box m
- CSS Hack兼容各浏览器是否正常
- 最常用的12种CSS BUG解决方法与
- [分享]我的css hack观点
- CSS实例教程:分号引起页面混乱
- CSS教程:认真学习haslayout
- CSS教程:编写CSS代码时样式命名
- 如何在CSS中设定文本的尺寸
- CSS教程:CSS定位属性
- 新窗口打开超链接的正确方法
- 轻松搞定IE的CSS制作网页技巧3则
阅览排行
CSS quiz 带边 border 的三角形
www.jz123.cn 2012-11-02 来源: 站长家园 责任编辑(袁袁) 我要投递新闻
一、第一种方法
如 @zhiyelee 同学的方案所示,原理可以分解为:
利用 border 来实现2个三角形
将三角形叠在一起,实现一个类似的效果。
这是一种不错的方案。我现在小三角形的时候,也喜欢用这种方法。
二、终极方案
CSS3 是经常被提起,但在桌面端又很少被用到的内容。像 Alice UI 中有很多兼容解决方案其他都是利用 CSS3 来作高级浏览器的实现的。今天这个方案应该也算是一种兼容解决方案吧。后续再整到 Alice 中去。实现原理是这样的:
创建一个有 border 的四方形,用 CSS3 transfrom 作 45 度旋转
利用 IE 的 matrix filter 实现 css3 transfrom 的兼容方案
具体的效果可以看:Pure CSS Tips Angle。主要的实现代码可以自己 view source,这里贴出 CSS 代码:
复制代码代码如下:
/* 兼容解决方案:菱形 */
.diamond{
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.7071067811865475,
M12=-0.7071067811865477,
M21=0.7071067811865477,
M22=0.7071067811865475,
SizingMethod='auto expand'
);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform:rotate(45deg);
}
:root .diamond{filter:none\9;}
/* Tips 组件 */
.tips{position:absolute;background: #fff8e8;border:1px solid #ffba00;padding:10px;}
.tips-angle{position:absolute;display:block;width:8px;height:8px;font-size:0;background:#fff8ef;border-left:1px solid #ffba00;border-top:1px solid #ffba00;top:-5px;top:-6px\9;left:10px;}
上一篇:CSS文档流与块级元素(block)内联元素(inline)那点事 下一篇:初学者用div+css结构写网页的几个误区