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