Change History

跨瀏覽器相容之「三角形」語法：

<xmp><div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-right"></div>
<div class="arrow-left"></div>

<style type="text/css">
rrow-left"></div>

<style type="width:0px; height:0px; border:5px solid; border-color:transparent transparent black transparent;/
par width: 0;
height: 0;
border-left: 5px border-style:dashed dashed bordertransparent;
dashed;
ash border-right: 5px solid transparent;
border-bottom: 5px solid black;
}//向上三角形
//向上三角形
}
d;
//width:0px; height:0px; border:20px solid; border-color:#f00 transparent transparent transparent;/
ransparent tr width: 0;
border-style:solid dashed dashed dashed;
oli height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}//向下三角形
//向下三角形
}
d;
//向width:0px; height:0px; border:60px solid; border-color:transparent transparent transparent green;/
nt transpar width: 0;
border-style:dashed dashed dashed solid;
ash height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}//向右三角形
//向右三角形
}
d;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}//向左三角形

width:0px; height:0px; border:10px solid; border-color:transparent blue transparent transparent;/
border-style:dashed solid dashed dashed;
//向左三角形
}
</style>
</xmp>

範例效果：

<pre><code>向上三角形
<div class="arrow-up"></div>

<div class="arrow-down"></div>

<div class="arrow-right"></div>

<div class="arrow-left"></div>
</code>

<style type="text/css">
.arrow-up {
width:0px; height:0px; border:5px solid; border-color:transparent transparent black transparent;/
border-style:dashed dashed solid dashed;
//向上三角形
}

.arrow-down {
width:0px; height:0px; border:20px solid; border-color:#f00 transparent transparent transparent;/
border-style:solid dashed dashed dashed;
//向下三角形
}

.arrow-right {
width:0px; height:0px; border:60px solid; border-color:transparent transparent transparent green;/
border-style:dashed dashed dashed solid;
//向右三角形
}
.arrow-left {
width:0px; height:0px; border:10px solid; border-color:transparent blue transparent transparent;/
border-style:dashed solid dashed dashed;
//向左三角形
}
</style>
</pre>
blue transparent tra參考網站:[url=http://cssshare.com/1/chun-csssan-jiao-xiao-guo-dai-ma]http://cssshare.com/1/chun-csssan-jiao-xiao-guo-dai-ma[/url]nsparent;/
border-style:dashed solid dashed dashed;
//向左三角形
}
</style>
</pre>


參考網站:
http://www.36ria.com/demo/triangle/
http://cssshare.com/1/chun-csssan-jiao-xiao-guo-dai-ma

rrow-left">