純css實現等邊空心三角形

2021-08-15 04:01:10 字數 534 閱讀 8970

前段時間寫了一些靜態頁面,用到了空心三角形,手到擒來的是實心三角形,對於空心的三角形,確實用了我這個老年人的腦子想了一想如何布局。給到的設計圖如下圖所示:

就是左上方的那個小三角,不止這個方位有,別的方位也都有,還有別的頁面也有不同朝向的三角形;

話不多說,**記錄下來:

首先藍色border的一整塊是乙個div

class="main">div>

//大致繪製乙個四方形

.main

//重點來了

.main

:before

.main

:after

關鍵的點是:

1.需要有兩個三角形,乙個是有色的,乙個是白色的,兩個三角形疊加,形成空心三角形

2.我使用的是元素的偽類before和after;

3.內部的三角形需要比外部的小一圈

css空心三角形 CSS實現空心三角指示箭頭

web開發中,三角形的日常應用,以三角形指示箭頭最為常見,其用css來實現非常簡單,熟悉了之後相比於引入svg或是背景會是更好更靈活的選擇。而三角箭頭一般而言,又分為兩種,一種是視覺上沒有邊框的,我們叫做實心三角形 還有一種是視覺上有邊框的,而三角箭頭刨去邊框的部分又要與主體元素的背景顏色一致,我們...

空心三角形

把乙個字元三角形掏空,就能節省材料成本,減輕重量,但關鍵是為了追求另一種視覺效果。在設計的過程中,需要給出各種花紋的材料和大小尺寸的三角形樣板,通過電腦臨時做出來,以便看看效果。input每行包含乙個字元和乙個整數n 0這個題當初看到的時候挺簡單的,後來做了好長時間,這個輸出方式我表示很不理解,好像...

空心三角形

problem description 把乙個字元三角形掏空,就能節省材料成本,減輕重量,但關鍵是為了追求另一種視覺效果。在設計的過程中,需要給出各種花紋的材料和大小尺寸的三角形樣板,通過電腦臨時做出來,以便看看效果。input 每行包含乙個字元和乙個整數n 0output 每個樣板三角形之間應空上...