欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS quiz 帶邊 border 的三角形

  發(fā)布時(shí)間：2012-06-27 15:10:24   作者：佚名   我要評論
在 twitter 上發(fā)了一條推，給一道 CSS 題給大家做。有幾位同學(xué)給了回答，@zhiyelee 同學(xué)還給出了他的具體實(shí)現(xiàn)方案
推的原文是：“CSS Quiz: 如何不用圖片、兼容所有瀏覽器實(shí)現(xiàn)這樣的界面？晚上博客公布答案 twitpic.com/981xba”。大概需要實(shí)現(xiàn)下圖的效果：

tips
一、第一種方法
如 @zhiyelee 同學(xué)的方案所示，原理可以分解為：

利用 border 來實(shí)現(xiàn)2個(gè)三角形
將三角形疊在一起，實(shí)現(xiàn)一個(gè)類似的效果。
這是一種不錯(cuò)的方案。我現(xiàn)在小三角形的時(shí)候，也喜歡用這種方法。

二、終極方案
CSS3 是經(jīng)常被提起，但在桌面端又很少被用到的內(nèi)容。像 Alice UI 中有很多兼容解決方案其他都是利用 CSS3 來作高級瀏覽器的實(shí)現(xiàn)的。今天這個(gè)方案應(yīng)該也算是一種兼容解決方案吧。后續(xù)再整到 Alice 中去。實(shí)現(xiàn)原理是這樣的：

創(chuàng)建一個(gè)有 border 的四方形，用 CSS3 transfrom 作 45 度旋轉(zhuǎn)
利用 IE 的 matrix filter 實(shí)現(xiàn) css3 transfrom 的兼容方案
具體的效果可以看：Pure CSS Tips Angle。主要的實(shí)現(xiàn)代碼可以自己 view source，這里貼出 CSS 代碼：


復(fù)制代碼
代碼如下:

/* 兼容解決方案：菱形 */
.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;}

相關(guān)文章

最新評論