css中怎么設(shè)置三角形？下面本篇文章給大家介紹一下CSS創(chuàng)建三角形(小三角)的幾種方法。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。

CSS創(chuàng)建三角形(小三角)的幾種方法

1、CSS 邊框

這也是一個(gè)常用的使用方式，如tooltips信息提示框和下拉菜單。以上的示例，這是一個(gè)我最喜歡的方法創(chuàng)建小而且有用的三角形。

優(yōu)點(diǎn)很容易的通過(guò)修改一些CSS代碼屬性值而更改顏色和大小

這是一個(gè)跨瀏覽器的解決方案。

缺點(diǎn)這個(gè)方式使用的是border,所以你不能添加陰影、漸變、和其他一些CSS3效果

請(qǐng)記住，IE6是不支持透明邊界的-如果你關(guān)心這個(gè)問(wèn)題

2、HTML 字符

它是基于使用可用的Unicode字符列表的字符。

優(yōu)點(diǎn)它是一個(gè)跨瀏覽器的技術(shù)

您可以使用CSS3的text-shadow屬性添加陰影。

缺點(diǎn)不能使用太多的CSS3效果，除了使用文字陰影。

在所有的瀏覽器，這是相當(dāng)不可能實(shí)現(xiàn)像素完美。

3、CSS 旋轉(zhuǎn)正方形

理論上,這種方式，你需要使用兩個(gè)內(nèi)容塊，但是，并沒(méi)有限制是使用兩個(gè)元素，所以可以使用一個(gè)元素加一個(gè)偽元素。創(chuàng)建一個(gè)內(nèi)容里。例如100×100像素 – 這將包含旋轉(zhuǎn)塊。

旋轉(zhuǎn)包含的這個(gè)塊45度，從而獲得一個(gè)菱形

將菱形的塊向頂部偏移，然后設(shè)置溢出，設(shè)置父層容器截?cái)?/p>

There you go!

優(yōu)點(diǎn)CSS3陰影，漸變等可以更多的使用

缺點(diǎn)這個(gè)解決方案不是跨瀏覽器的,首先是因?yàn)镃SS3旋轉(zhuǎn)。

4、HTML5 Canvas

在你的HTML文件中有以下的canvas元素：Triangle

這里的如何使用JavaScript繪制一個(gè)三角形：var canvas = document.getElementById('triangle');

var context = canvas.getContext('2d');

context.beginPath();

context.moveTo(0, 0);

context.lineTo(100, 0);

context.lineTo(50, 100);

context.closePath();

context.fillStyle = "rgb(78, 193, 243)";

context.fill();

5、SVG (Scalable Vector Graphics)

這是如何在您的標(biāo)簽，你可以定義一個(gè)內(nèi)聯(lián)SVG三角形：

然后，只需添加一些樣式：.svg-triangle{

margin: 0 auto;

width: 100px;

height: 100px;

}

.svg-triangle polygon {

fill:#98d02e;

stroke:#65b81d;

stroke-width:2;

}查看全部實(shí)例展示(http://www.daqianduan.com/example/?pid=4721)

更多web前端相關(guān)知識(shí)，請(qǐng)查閱 HTML中文網(wǎng) ！！

總結(jié)

以上是生活随笔為你收集整理的怎么在html5中加三角形,css中怎么设置三角形？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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