網頁 畫乙個三角形

2021-08-15 15:30:29 字數 924 閱讀 4312

有參照別人的**,寫一下自己的理解。這是給自己的乙個記錄~

這個方法主要是對css-border 的理解以及運用。主要利用就是兩個內嵌的正方形之間產生的形狀

依據圖形:

**:css:

html:

**中的height和width都是對小正方形設值的。大正方形的邊長為120px*120px

由上面這個圖形可以看到兩個正方形和4個等邊梯形,要想有乙個三角形,可以很自然的想到讓小正方形的邊長變為0。

得到的圖形:

注意寫法: height:0px;  width:0px; 或者height:0;  width:0;

如果寫成:height:;    width:;或者直接不寫這兩個,圖形會變成下面這樣的形狀。

我們得到了4個小三角形,但是我們只需1個,所以很容易就想到把其他三個**掉。

以得到上面的紅色三角形為例:

html的**不變

改變css**:

得到:

**中 border-bottom的語句其實可以直接刪去,因為right和left的圖形已經可以很好的限制top的圖形。

最終css的**:

利用對border四邊的顏色及中間四邊形的變形,可以變換出各種梯形以及三角形。

opengl es畫乙個三角形

剛開始學,記錄一下呼叫順序,套路都是一樣的 文章參考 1 建立乙個shaderutil來編譯glsl public class shaderutil public static int compilefragmentshader string fragmentshadercode throws ru...

通過css畫乙個三角形

css製作三角形的原理 邊框的均分原理 lang en charset utf 8 name viewport content width device width,initial scale 1.0 transparenttitle divstyle head div body html tran...

如何在網頁上畫乙個三角形

首先我們來看看如何繪製乙個正方形,畫正方形其實很簡單 我們只需要畫乙個盒子的四個邊框,寬和高設定設定為0px就可以 一起看看源 一起來看卡效果吧 這樣我們就繪製了乙個看起來由四個三角形組成的正方形 接下來我們只需要將其他三個三角形的顏色設定成和背景顏色一樣即可 來看看效果吧 這個做法有乙個弊端,就是...