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

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

1、CSS 邊框

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

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

這是一個跨瀏覽器的解決方案。

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

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

2、HTML 字符

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

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

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

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

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

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

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

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

將菱形的塊向頂部偏移，然后設(shè)置溢出，設(shè)置父層容器截斷

There you go!

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

缺點這個解決方案不是跨瀏覽器的,首先是因為CSS3旋轉(zhuǎn)。

4、HTML5 Canvas

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

這里的如何使用JavaScript繪制一個三角形：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)簽，你可以定義一個內(nèi)聯(lián)SVG三角形：

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

margin: 0 auto;

width: 100px;

height: 100px;

}

.svg-triangle polygon {

fill:#98d02e;

stroke:#65b81d;

stroke-width:2;

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

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

總結(jié)

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

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