Question to say "I can!"

CSS quiz: 帶邊 border 的三角形

2012-04-14

原文:sofish——CSS quiz: 帶邊 border 的三角形

在 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;}

 

作者:admin | Categories:設計問題 | Tags:

發表評論

電子郵件地址不會被公開。 必填項已用*標注

*

澳洲f1赛车b盘开奖套路 分分彩自动投注软件手机版 广东快乐10分开奖走势图带预测 加拿大快乐8开奖结果怎么查 黑龙冮体彩11选5开结果 贵州快3和值走势图表 十大网上股票配资平台 江西快3appqicp—me 股票入门基础知识书 手机中彩网下载 北京赛车pk拾开奖直播 北京pk10冠军走势图 澳洲快乐8玩法 盈股在线配资 浙江6十1开奖18055期 股票资金如何分配? 精准一头一尾中特平