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

2022-07-13 06:09:11 字數 888 閱讀 4907

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

1、第一種圖形:

2、第二種圖形:

3、右上、右下、左上、左下三角形:

1

/*右上三角*/2

.box2

10/*

右下三角

*/11

.box3

19/*

左上三角

4、上下左右三角形:

1

/*上三角。下邊距不設定影響位置*/2

.box6

12/*

下三角。上邊距不設定影響位置

*/13

.box7

23/*

左三角*/

24.box8

34/*

右三角*/

CSS 邊框 border 例項

所有邊框屬性在乙個宣告之中 本例演示用簡寫屬性來將所有四個邊框屬性設定於同一宣告中。設定四邊框樣式 本例演示如何設定四邊框樣式。設定每一邊的不同邊框 本例演示如何在元素的各邊設定不同的邊框。所有邊框寬度屬性在乙個宣告之中 本例演示用簡寫屬性來將所有邊框寬度屬性設定於同一宣告中。設定四個邊框的顏色 本...

css 盒子邊框 border

1 css 邊框屬性 border width border style border color 1.1 邊框樣式 border style border style 值 none 預設無邊框 dotted 定義乙個點線邊框 dashed 定義乙個虛線邊框 solid 定義實線邊框 1.2邊框顏色...

CSS 邊框 border 例項

css 邊框 border 例項 元素的邊框 border 是圍繞元素內容和內邊距的一條或多條線。css border 屬性允許你規定元素邊框的樣式 寬度和顏色。css 邊框屬性 屬性 描述 border 簡寫屬性,用於把針對四個邊的屬性設定在乙個宣告。border style 用於設定元素所有邊框...