CSS使用border來創建三角形的基本思路和實例

來源：懂視網責編：小采時間：2020-11-27 16:41:33

CSS使用border來創建三角形的基本思路和實例

CSS使用border來創建三角形的基本思路和實例:比較簡單實用的還是使用border來創建三角形，今天主要研究這個的實現將邊框分別設置為紅/黃/藍/綠 .triangle { height: 0; width: 0; overflow: hidden; font-size: 0; line-height: 0; border-color: #ff0000 #ff

推薦度：

點擊下載本文 文檔為doc格式

導讀CSS使用border來創建三角形的基本思路和實例:比較簡單實用的還是使用border來創建三角形，今天主要研究這個的實現將邊框分別設置為紅/黃/藍/綠 .triangle { height: 0; width: 0; overflow: hidden; font-size: 0; line-height: 0; border-color: #ff0000 #ff

比較簡單實用的還是使用border來創建三角形，今天主要研究這個的實現

將邊框分別設置為紅/黃/藍/綠

.triangle { 
 height: 0; 
 width: 0; 
 overflow: hidden; 
 font-size: 0; 
 line-height: 0; 
 border-color: #ff0000 #ffff00 #0000ff #008000; 
 border-style: solid; 
 border-width: 40px 40px 40px 40px; 
}

效果如下：

CSS 使用border來創建三角形的基本思路和實例

四個三角形合成一個正方形，大小為80x80，如果我們只想保留其中某個三角形的話，將其它的設置為透明即可，比如(以下css未改變部分與上面相同)

.triangle { 
 border-color: #ff0000 transparent transparent transparent; 
 border-width: 40px 40px 40px 40px; 
}

效果如下：

CSS 使用border來創建三角形

IE6不支持transparent，所以不會透明而會顯示難看的黑色，不過也有解決方法：將透明的部分對應的border-style設為dashed即可

.triangle { 
 border-color: #ff0000 transparent transparent transparent; 
 border-style: solid dashed dashed dashed; 
 border-width: 40px 40px 40px 40px; 
}

正方形按對角線平分為兩個三角形的情況

.triangle { 
 border-color: #ff0000 #ffff00 #0000ff #008000; 
 border-style: solid; 
 border-width: 0 0 40px 40px; 
}

CSS 使用border來創建三角形

.triangle { 
 border-color: #ff0000 #ffff00 #0000ff #008000; 
 border-style: solid; 
 border-width: 0 40px 40px 0; 
}

CSS 使用border來創建三角形

需要指出的是，此時正方形的大小為40x40

如果將border-width的某一邊設為0又會怎么樣呢？也算是兩種情況

.triangle { 
 border-color: #ff0000 #ffff00 #0000ff #008000; 
 border-style: solid; 
 border-width: 40px 40px 0 40px; 
}

CSS 使用border來創建三角形

.triangle { 
 border-color: #ff0000 #ffff00 #0000ff #008000; 
 border-style: solid; 
 border-width: 40px 40px 40px 0; 
}

CSS 使用border來創建三角形

結果是長方形，其中一邊為80一邊為40。寬度被設為0的邊框對應方向的邊框會形成較大的三角形，且長度加倍

segmentfault的"采納"的顯示其實也是用三角形實現的

CSS 使用border來創建三角形

上部分是包含'采納'兩個字的塊狀元素，設置position: relative。下部分用偽類after設置一個position: absolute的塊狀元素，將兩者接在一起。通過border-width設置成長方形而不是正方形，再將下方的三角形去掉即可，看下面的css十分明顯，這也是三角形的一個很好的應用

.accepted-flag:after { 
 position: absolute; 
 left: 0; 
 top: 25px; 
 content: ''; 
 border-width: 9px 18px; 
 border-style: solid; 
 border-color: #009a61 #009a61 transparent #009a61; 
}

HTML5 Canvas

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

這里的如何使用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();

SVG (Scalable Vector Graphics)

這是如何在您的標簽，你可以定義一個內聯SVG三角形：

然后，只需添加一些樣式：

.svg-triangle{ 
 margin: 0 auto; 
 width: 100px; 
 height: 100px; 
} 
 
.svg-triangle polygon { 
 fill:#98d02e; 
 stroke:#65b81d; 
 stroke-width:2; 
}

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com