看到像上圖這樣的 tip 的小三角，你會(huì)怎么辦？

切個(gè)圖上去？恩，不錯(cuò)，簡單，兼容性也一級(jí)棒，不但好控制，那點(diǎn)小東西也增加不了多少圖片的大小。但有沒有更好更講究技巧的辦法呢？哈哈，那必須有啊，而且還不止一種呢：)

純 CSS 做三角形的方法，目前我知道三種，分別是利用 border 屬性，“◆”字符，和 CSS3 transfrom?做 45 度旋轉(zhuǎn)實(shí)現(xiàn)的，CSS3的方法是在碼頭哥的博客上學(xué)到的，很感謝你們的分享，前端有你們更精彩！

1.利用 border 屬性實(shí)現(xiàn)三角形

這個(gè)原理很簡單，我我們先看下面的圖，這是一個(gè)邊框?yàn)?20px 的 div，看他的邊框，是個(gè)梯形，變化會(huì)從這里開始。

CSS：

.triangle{width:30px;height:30px;border-width:20px;border-style:solid;border-color:#e66161 #f3bb5b #94e24f #85bfda;

}

好的，現(xiàn)在我把它的寬和高都設(shè)為 0，看看有什么變化。

四個(gè)邊框都變成三角形了，現(xiàn)在我再把它的左右和下邊框的顏色都設(shè)成透明或和背景顏色相同的顏色，就出來我們想要的三角形了，推薦把邊框設(shè)置成透明，這樣拓展性更好。

注：IE6下把邊框設(shè)置成 transparent?時(shí)會(huì)出現(xiàn)黑影，并不會(huì)透明，把 border-style 設(shè)置成 dashed 可以解決。

CSS：

.triangle{width:0;height:0;border-width:20px;border-style:solid dashed dashed dashed;border-color:#e66161 transparent transparent transparent;

}

如果我們想實(shí)現(xiàn)下圖的效果該怎么辦呢？很簡單，做兩個(gè)小三角，一個(gè)是背景色，一個(gè)是邊框色，然后利用定位重疊在一起，記住他們的定位要相差一個(gè)像素。

HTML：

我是利用 border 屬性實(shí)現(xiàn)的

CSS：

.message-box {position:relative;width:240px;height:60px;line-height:60px;background:#E9FBE4;box-shadow:1px 2px 3px #E9FBE4;border:1px solid #C9E9C0;border-radius:4px;text-align:center;color:#0C7823;

}

.triangle-border {position:absolute;left:30px;overflow:hidden;width:0;height:0;border-width:10px;border-style:solid dashed dashed dashed;

}

.tb-border {bottom:-20px;border-color:#C9E9C0 transparent transparent transparent;

}

.tb-background {bottom:-19px;border-color:#E9FBE4 transparent transparent transparent;

}

2.利用”◆“字符實(shí)現(xiàn)三角形

字符實(shí)現(xiàn)也是要用兩個(gè)字符用絕對(duì)定位去模擬，只是它不能模擬出三角形，它是個(gè)菱形，然后露出半個(gè)頭，底色又和背景色一樣，看上去就像是個(gè)三角形了。。

注意：它的大小是由 font-size 決定的，width 和 height 都決定不了，但最好還是加上，這樣各個(gè)瀏覽器去生成這個(gè)字符的時(shí)候能保持一致，我們?nèi)懡^對(duì)定位的時(shí)候就不用寫 hack 了。

HTML：

我是利用 ◆ 字符實(shí)現(xiàn)的

◆◆

CSS：

.message-box {position:relative;width:240px;height:60px;line-height:60px;background:#E9FBE4;box-shadow:1px 2px 3px #E9FBE4;border:1px solid #C9E9C0;border-radius:4px;text-align:center;color:#0C7823;

}

.triangle-character {position:absolute;left:30px;overflow:hidden;width:26px;height:26px;font:normal 26px "宋體"; // 字符的大小和字體也有關(guān)系哦！}

.tc-border {bottom:-13px;color:#C9E9C0;

}

.tc-background {bottom:-12px;color:#E9FBE4;

}

3.利用?CSS3 transfrom 旋轉(zhuǎn) 45 度實(shí)現(xiàn)三角形

先創(chuàng)建一個(gè)帶 border 的 div ，設(shè)置好背景色和相鄰的兩個(gè)邊框的顏色，然后選擇 45 度，聽著很簡單是嗎，但是利用?IE 的 matrix filter 實(shí)現(xiàn) css3 transfrom 的兼容方案很頭大，我是沒看懂，有看懂的兄弟情賜教啊：)

注：IE6下無效。

HTML：

我是利用 css transfrom 屬性字符實(shí)現(xiàn)的

CSS：

.message-box {position:relative;width:240px;height:60px;line-height:60px;background:#E9FBE4;box-shadow:1px 2px 3px #E9FBE4;border:1px solid #C9E9C0;border-radius:4px;text-align:center;color:#0C7823;

}

.triangle-css3 {position:absolute;bottom:-8px;bottom:-6px�;left:30px;overflow:hidden;width:13px;height:13px;background:#E9FBE4;border-bottom:1px solid #C9E9C0;border-right:1px solid #C9E9C0;

}

.transform {-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);

}/*ie7-9*/.ie-transform-filter {-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');

}

總結(jié)

以上是生活随笔為你收集整理的三角形旋转css_三种纯CSS实现三角形的方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。