HTML 利用border寫出三角形的三種方法

2021-08-04 12:44:10 字數 540 閱讀 7796

第一種方法:需要多大的三角形就設定相應畫素的border值,然後將其中三個方向的邊框顏色設定為透明或者將邊框顏色設定為與背景相同的顏色即可。例如:

效果圖:

第二種方法:按照第一種方法做出乙個三角形,然後再寫出乙個與背景色相同顏色的三角形,不同的是第二個三角形不需要顯示的邊框的顏色必須設定為透明色,否則第乙個三角形將被完全覆蓋,而需要顯示的那個邊框顏色則要設定為與背景色同色。最後利用定位第二個三角形將第乙個三角形不完全覆蓋,例如:

效果圖:

第三種方法:先輸入乙個特殊字元◇,利用定位左右上下移動相應的距離,前提是父類標籤必須設定超出超出隱藏。例如:

效果圖:

利用border實現等高布局

利用border實現等高布局 邊框寬度固定 效果圖如下 模組1 模組2模組3 css box left clearfix after 當修改html結構後,讓左側浮動區域寬度變小,效果為 需要注意的地方 1 利用了元素邊框顏色和背景顏色的高度相等的原理,因此background clip應該為預設值...

HTML5邊框的設定(border)

邊框的樣式 solid 實線 dotted 點線 dashed 虛線 double 雙線 inset 三維立體效果 邊框有3個元素,用法是 border top 10px soild red border top 上邊 border bottom 下邊 border left 左邊 border r...

CSS學習筆記 利用border繪製三角形

在前端的筆試 面試過程中,經常會出現一些不規則圖形的css設定,基本上多是矩形外加乙個三角形。利用css屬性可以實現三角形的生成,主要利用上下左右的邊距的摺疊。1 第一種圖形 2 第二種圖形 3 右上 右下 左上 左下三角形 1 右上三角 2 box2 10 右下三角 11 box3 19 左上三角...