三角形旋转css_三种纯CSS实现三角形的方法
看到像上圖這樣的 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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 如何打造合作型团队——阿里内贸团队敏捷实
- 下一篇: 【css默认设置】---- 关于CSS