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盘开奖套路 欧州黄色片 女足世界杯比分 天津快乐十分钟开奖走势图彩票 11选5遗漏河北 东京热百度云下载链接 甘肃十一选五今天开 360足球直播 北京快3夜间开奖结果查 1分彩和值怎么看 11选5山东 nba掘金vs灰熊视频直播 青海十一选五基本走势图 排列三走势图坐标 原千岁24部在线观看 内蒙古快三走势图下载 今日大今日大乐透开奖结果