CSS quiz 帶邊 border 的三角形
發(fā)布時間：2012-06-27 15:10:24 作者：佚名 
我要評論
我要評論在 twitter 上發(fā)了一條推，給一道 CSS 題給大家做。有幾位同學給了回答，@zhiyelee 同學還給出了他的具體實現(xiàn)方案
推的原文是：“CSS Quiz: 如何不用圖片、兼容所有瀏覽器實現(xiàn)這樣的界面？晚上博客公布答案 twitpic.com/981xba”。大概需要實現(xiàn)下圖的效果：
/* 兼容解決方案：菱形 */
.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;}
一、第一種方法
如 @zhiyelee 同學的方案所示，原理可以分解為：
利用 border 來實現(xiàn)2個三角形
將三角形疊在一起，實現(xiàn)一個類似的效果。
這是一種不錯的方案。我現(xiàn)在小三角形的時候，也喜歡用這種方法。
二、終極方案
CSS3 是經(jīng)常被提起，但在桌面端又很少被用到的內(nèi)容。像 Alice UI 中有很多兼容解決方案其他都是利用 CSS3 來作高級瀏覽器的實現(xiàn)的。今天這個方案應該也算是一種兼容解決方案吧。后續(xù)再整到 Alice 中去。實現(xiàn)原理是這樣的：
創(chuàng)建一個有 border 的四方形，用 CSS3 transfrom 作 45 度旋轉(zhuǎn)
利用 IE 的 matrix filter 實現(xiàn) css3 transfrom 的兼容方案
具體的效果可以看：Pure CSS Tips Angle。主要的實現(xiàn)代碼可以自己 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;}
相關(guān)文章
- 本篇文章主要介紹了CSS3 用border寫 空心三角箭頭 (兩種寫法)，非常具有實用價值，需要的朋友可以參考下2017-09-29
CSS中使用border來創(chuàng)建三角形的基本方法講解
這篇文章主要介紹了CSS中使用border來創(chuàng)建三角形的基本方法講解,文中同時還附帶了對HTML5 Canvas和SVG三角形的介紹,需要的朋友可以參考下2016-03-31
這篇文章主要介紹了CSS繪制三角形的實現(xiàn)代碼(border法)的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-11
