CSS畫三角形

2021-09-19 23:52:12 字數 2275 閱讀 4713

今天我們使用最簡單的css來畫一些簡單的圖形

1.首先設定乙個div

2.然後給這個div設定樣式

.d1
這是結果

然後就可以擴充套件想象一下,把內容的寬和高設定為0,讓邊框來填充,那麼就是這種情況:

那麼下一步就是把不需要的三角形的邊框設定為透明色

margin:50px auto;

width:0px;

height:0px;

border-left: 50px transparent solid;

border-top: 50px transparent solid;

border-right: 50px transparent solid;

border-bottom:50px yellow solid;

就有了乙個三角形啦!然後可以調整顏色,位置,方向什麼的

那麼這是最簡單的三角形畫法,還有以下變形的三角形

可以調整邊框的大小,達到不同的效果,當然也是不規則的圖形

可以畫乙個直角三角形(紅色),為了演示,可以把藍和綠換為透明色,這裡沒換是因為可以看清楚原理

等腰直角三角形

等邊三角形:

只需要算出高即可:

把其餘的顏色變為透明就是如下的效果

大部分的都在這裡啦,你也可以動手試試,自己除錯大小,當然遠遠不止這些影象!

原創不易,請尊重原創!

css畫三角形

好久沒寫css了,練練手,剛看了下在以前公司做過的乙個 現在已經改版,裡面有個模組涉及到用css畫三角形,試著做了一下,分享出來。帳號 287019674 qq.com 密碼 123456 下面是對實現原理的分析 1 新建乙個元素,隨便什麼元素,不過我習慣性的會用塊元素來做。如果行內元素就displ...

CSS 畫三角形

使用 css 畫三角形?第一感覺不太可能。但那是對 border 有一點誤會。來看乙個示例 它的 html 如下 我們需要注意,邊框相接的地方,即相鄰邊框的樣式。因為我們平時使用邊框,一般只幾畫素寬,所以可以不注意它們相接的樣式,但當邊框達到50畫素寬,就可以清楚看到,它們在相接時是如何處理的 這是...

css畫三角形

解析 border width 100px 100px 100px 200px border color transparent transparent transparent eb1111 屬性值值說明 color 指定背景顏色。transparent 指定邊框的顏色應該是透明的。這是預設 inh...