CSS quiz: 带边 border 的三角形

标签: CSS 相关 css 博客技巧 | 发表时间:2012-04-10 15:15 | 作者:sofish
出处:http://sofish.de

在 twitter 上发了一条推,给一道 CSS 题给大家做。有几位同学给了回答,@zhiyelee 同学还给出了他的 具体实现方案。推的原文是:“CSS Quiz: 如何不用图片、兼容所有浏览器实现这样的界面?晚上博客公布答案 twitpic.com/981xba”。大概需要实现下图的效果:

tips

一、第一种方法

如 @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;}


© 2012 幸福收藏夹。 版权所有,转载务必注明。域名已经更新为: sofish.de
注意:当你觉得某篇文章有用,请直接看原文,因为通常我都会在写了文章后更新、去错别字、升级观点之类的。

相关 [css quiz border] 推荐:

CSS quiz: 带边 border 的三角形

- - 幸福收藏夹
在 twitter 上发了一条推,给一道 CSS 题给大家做. 有几位同学给了回答,@zhiyelee 同学还给出了他的 具体实现方案. 推的原文是:“CSS Quiz: 如何不用图片、兼容所有浏览器实现这样的界面. 晚上博客公布答案 twitpic.com/981xba”. 如 @zhiyelee 同学的方案所示,原理可以分解为:.

Terry Border:食材有性格,食物总动员

- changlei - 下厨房
Terry Border是一位美国摄影师,他用铁丝“加工”食材创作出一系列摄影作品,在网络上广为流传. 这些作品不仅是将食材拟人化,摆出有趣的造型. 更重要的是,它们构建出了一个个极具深意的场景. 看得出来,Terry Border并不满足于给食材安上四肢变变戏法,而是赋予它们灵魂,创造出了一整个充满伦理人情的感性世界.

拾人牙慧:不同浏览器如何渲染不同border-style值

- Lee - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1972. 本文的一些测试结果不是出自我手,来自:How Do Browsers Render the Different CSS Border Style Values?. 满脑子都是国庆假期,要是原文翻译根本没有这个精气神.

CSS图形

- GLORY - 酷壳 - CoolShell.cn
下面的示例展示了使用纯CSS制作的各种图形,你可以自由地修改文中的CSS代码. 经测试,IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.

用 Compass 寫 CSS

- Jay - Blog.XDite.net
最近在開發一個新產品,整體來說應該是接近寫完了,不過越接近完工,抓 IE 系列的 bug 就越是挫折. 朋友 @evenwu 就來洗我要不要換成 Compass,說這東西超神奇,超好用,還可以把 IE bug 殺光光. 其實之前就久仰 Compass 大名了,只是文件實在看起來太他媽的眼花繚亂,因為專案進度一直在跑,不太敢貿然換掉寫 CSS 的方式.

CSS 入门

- - 博客 - 伯乐在线
级联样式表非常简单,也就是 (X)HTML 网页之上的分层设计. 使样式表 “级联”,这样您就可以跨站点应用它 — 也就是说,将样式应用到网站,它就会自行应用到每个网页的每个元素. ●XHTML:可扩展 HTML. 对于网站,将数据与设计分离是一个重要的概念:数据使用 (X)HTML 发送到 浏览器,而设计使用 CSS 应用到该数据.

css 圆角

- - CSDN博客推荐文章
作者:kangquan2008 发表于2012-2-20 22:32:24 原文链接. 阅读:6 评论:0 查看评论.

CSS架构

- - 博客 - 伯乐在线
英文原文: CSS Architecture,编译: CSDN-张红月. Philip Walton 在AppFolio担任前端工程师,他在Santa Barbara on Rails的聚会上提出了CSS架构和一些最佳实践,并且在工作中一直沿用. 擅长CSS的Web开发人员不仅可以从视觉上复制实物原型,还可以用代码进行完美的呈现.

CSS总结

- - CSDN博客Web前端推荐文章
         接触过一段CSS,为简单理解,将CSS说成两步,一步是你做个“记号”,另一步是根据记号设置样式.      网页的内容和样式是分开的. “记号”便是能标识网页中某部分内容的关键字词(选择器),而根据记号设置样式呢,就是按图索骥根据记号设置标识的那部分内容的样式.     这段时间练习的每个CSS小例子,或是用id做记号,或是用name,或是用class,只有有了这些所谓的记号,CSS设定的样式才有用,.

CSS基础

- - CSDN博客Web前端推荐文章
1、引入CSS的四种方式. 行内样式、内嵌样式、链接样式、导入样式. 基本选择器:标签选择器,ID选择器,类选择器,通用选择器. 通用选择器:*{css代码}. 通用选择器作用:对整个网页中所有HTML标签进行样式定义. 常见用法:定义*{margin:0;padding:0}通用样式,并置于CSS文件最顶端,用于对HTML内所有的标签进行重置以保证页面能兼容多种浏览器.