利用CSS3新特性創(chuàng)建透明邊框三角
更新時間：2016年03月26日 10:53:25 作者：一去丶二三里
本文分享一個利用CSS3制作三角形的示例，感興趣的朋友可以參考一下。
先來看一下效果，這在CSS3之前，完全是不可想象的，只有圖片才能做的到，但在HTML5和CSS3大行其道的今天，實現(xiàn)這種效果，那都不是事啊。
看一下實現(xiàn)的代碼：
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
/* 上三角 */
.arrow-up {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid green;
}
/* 下三角 */
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid orange;
}
/* 右三角 */
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid blue;
}
/* 左三角 */
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid silver;
}
</style>
</head>
<body>
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</body>
</html>
相關(guān)文章
怎樣管理好樣式...2006-11-11
用腳本控制div高度，慢慢緩沖效果不錯2008-10-10
line-block：本身是內(nèi)聯(lián)盒模型的存在，又具備塊狀盒模型的特性。很好很強(qiáng)大的東西啊～2008-05-05
用js實現(xiàn)的DIV+CSS編輯器代碼...2007-03-03
純CSS的下拉菜單 支持IE6 IE7 Firefox 不用js兼容性好2008-11-11
div+css布局必須要知道的css條件注釋理論及實踐...2007-05-05
表格（table）是一直以來長期被大家使用的標(biāo)簽，直到現(xiàn)在還是在用，不過呢因為現(xiàn)在的網(wǎng)站重構(gòu)，建議大家不要表格（table）來布局而很多朋友誤以為用表格（table）就是所謂的不標(biāo)準(zhǔn)了，其實不然，表格（table）是一個重要元素。2008-10-10
收藏了很久的CSS的十八般技巧...2006-12-12
在做前端項目時CSS的水平居中我們經(jīng)常使用，但有時還會用到CSS垂直居中，對于小白來說這個就有些難度了，下面看一下我是如何實現(xiàn)的2020-01-01
用CSS解決中英文混合字符串的截取省略問題的解決辦法...2007-02-02