在網頁中，你在很多地方都能看到倒三角，比如tooltips，下拉菜單等。大家有幾種方式來實現呢？
1.BASE64編碼 圖片
假如你已經有了三角形的圖片，並且減少HTTP請求，那么將這個圖片轉換成一個BASE64字符串是最好的解決方案。
有用的工具
http://webcodertools.com/imagetobase64converter
http://image2base64.wemakesites.net/
優點
- 你可以按照自己的思想設計陰影，漸變等，然后對其進行轉換編碼
缺點
- 你需要使用一個圖片編輯軟件去設計
- 對於較大的圖片，最終轉換成字符串占用大小會很大
- 舊版本的瀏覽器，如：IE6/IE7是不兼容的
2.CSS 邊框
<html>
<title>倒三角演示代碼1</title>
<head>
<style type="text/css">
.triangleDiv{
border-color: #57af1a #fff #fff #fff;
border-style: solid;
border-width: 100px 60px 0 60px;
height: 0;
width: 0;
}
</style>
</head>
<body>
<div class='triangleDiv'></div>
</body>
</html>
優點
- 很容易的通過修改一些CSS代碼屬性值而更改顏色和大小
- 這是一個跨瀏覽器的解決方案。
缺點
- 這個方式使用的是border,所以你不能添加陰影、漸變、和其他一些CSS3效果
- 請記住，IE6是不支持透明邊界的-如果你關心這個問題
- 如果你使用火狐瀏覽器，要知道，CSS的“透明”有時可能不會是透明的
3.Unicode字符
<html>
<title>倒三角演示代碼2</title>
<head>
<style type="text/css">
.triangleDiv{
font-size: 18px;
color: #f7931d;
text-shadow: 0 1px 1px rgb(99, 95, 92);
}
</style>
</head>
<body>
<span class='triangleDiv'>▼</span>
</body>
</html>
優點
- 它是一個跨瀏覽器的技術
- 您可以使用CSS3的text-shadow屬性添加陰影。
缺點
- 不能使用太多的CSS3效果，除了使用文字陰影。
- 在所有的瀏覽器，這是相當不可能實現像素完美。
4.CSS 旋轉正方形
<html>
<title>倒三角演示代碼3</title>
<head>
<style type="text/css">
.parentDiv {
height: 14px;
overflow: hidden;
}
.triangleDiv {
position: relative;
height: 20px;
width: 12px;
top: -12px;
left: 7px;
background: #0c0c0c;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="parentDiv">
<div class="triangleDiv"></div>
</div>
</body>
</html>
優點
- CSS3陰影，漸變等可以更多的使用
缺點
- 這個解決方案不是跨瀏覽器的,首先是因為CSS3旋轉。