僅使用HTML元素通過CSS樣式製作乙個小三角

2021-08-18 07:27:54 字數 605 閱讀 6800

製作小三角有兩種常用的方式,

1:是css3種的方法,通過旋轉乙個div元素45度,然後定位到外部div的某一邊,把多餘的用overflow:hidden;遮住,來獲取乙個三角形,但是這種方法相容性不是很好,而且之前的瀏覽器也沒有旋轉屬性,

2: 通過邊框屬性,來製作小三角.

我們可以看到,邊框和邊框之間是45度斜著分割的,如果我們把元素尺寸設定為0 ,僅僅留下邊框,就能獲得四個不同顏色的三角形.

如果想要留下某乙個方向的小三角形,那就把其他三個方向的邊框顏色全部設定為 : transparent   (此屬性是隱藏某個邊框的顏色)

HTML中通過CSS方式隱藏元素

1 通過style屬性中的 display none display none這兩種方式的區別是 display 設定為 none之後,該元素不占用文件流 visibility 設定為 hidden之後,該元素仍然占用文件流,只不過是看不見了而已 2 通過style屬性中的 visibility h...

9種HTML中通過CSS方式隱藏元素的方法

1 通過style屬性中的 display none display none這兩種方式的區別是 display 設定為 none之後,該元素不占用文件流 visibility 設定為 hidden之後,該元素仍然占用文件流,只不過是看不見了而已 2 通過style屬性中的 visibility h...

9種HTML中通過CSS方式隱藏元素的方法

1 通過style屬性中的display none 2 通過style屬性中的visibility hidden 這兩種方式的區別是 display 設定為 none之後,該元素不占用文件流 visibility 設定為 hidden之後,該元素仍然占用文件流,只不過是看不見了而已。3 通過相對定位...