CSS做等邊三角形

2021-08-19 20:19:14 字數 1227 閱讀 7191

這裡我列舉的兩種方法:一種用邊框也就是border實現(比較簡單)另一種是用五個div旋轉溢位隱藏實現

在我們平常使用邊框的時候往往是乙個很窄的邊框,所以在視覺效果上邊框看似為直線,事實呢?

給乙個小的盒子加乙個很寬的邊框,如下:

可以明顯的看出其實並不是像想的那樣邊框是直線或者矩形。其實它是體型滴~

下面我們去掉盒子的寬度(都變為0),css如下:

由四個三角形組成的矩形就出來了。。。如果我們想要三角形只需要把其中的三個三角形(即邊框)的顏色變為透明即可

三角形出來了。。。

而三角形的角度只需要通過調節邊框的長度即可控制,具體多少就是簡單的數學問題

了(三角函式,勾股定理。。)

上述例中長度大概按 1 : 2 : 1.732 來就是正三角形了

如果看著不舒服或者要求需要可以用 transform:rotate(指定角度);旋轉即可

.d1,.d2,.d3,.d4,.d5

/*d1與d4位置重合*/

.d1.d2

.d3.d4

.d5

在沒有設定溢位隱藏時:

然後 加上overflow:hidden:

這個超麻煩。。還是border吧,自己玩玩還可以

等邊三角形

蒜頭君手上有一些小木棍,它們長短不一,蒜頭君想用這些木棍拼出乙個等邊三角形,並且每根木棍都要用到。例如,蒜頭君手上有長度為1,2,3,3的4根木棍,他可以讓長度為1,2的木棍組成一條邊,另外2跟分別組成2條邊,拼成乙個邊長為3的等邊三角形。蒜頭君希望你提前告訴他能不能拼出來,免得白費功夫。輸入格式 ...

python繪製等邊三角形

定義乙個函式,引數為三角形的邊長和顏色,並呼叫該函式繪製兩個邊長顏色不同的等邊三角形 1 defdraw l,color 2import turtle 3 turtle.setup 900,600,200,200 4 turtle.penup 筆抬起5 turtle.fd 60 6 turtle.p...

計蒜客 等邊三角形

蒜頭君手上有一些小木棍,它們長短不一,蒜頭君想用這些木棍拼出乙個等邊三角形,並且每根木棍都要用到。例如,蒜頭君手上有長度為 11,22,33,33 的4根木棍,他可以讓長度為11,22 的木棍組成一條邊,另外 22 跟分別組成 22條邊,拼成乙個邊長為 33 的等邊三角形。蒜頭君希望你提前告訴他能不...