這裡我列舉的兩種方法:一種用邊框也就是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 的等邊三角形。蒜頭君希望你提前告訴他能不...