border特性 構造不同的三角形

2021-09-14 02:28:28 字數 1130 閱讀 6682

html**

css**

/* border是由三角形組成,並非矩形邊 */

/* 三角形 */

/* 左直角三角形*/

.left-angle

/* 下左*/

.right-angle

/* 上左 */

/* 三角形用偽元素實現邊框和對話方塊*/

.dialog

.dialog span.dialog-********

.dialog span.dialog-********::after

/* 設定文字垂直水平居中 */

Border屬性製作三角Tip

第一次寫部落格,今天剛做了乙個選單 發現border屬性的妙用,效果如圖 主要用到的幾個屬性 border color border width border style,border color 設定邊框顏色 一共四個值 分別對應 上 右 下 左 border width 設定邊框的寬度 例如bo...

使用border做三角形

上經常會使用一些三角形,除了的方式,實際上利用border我們可以做出純css的三角形。我們知道border是個邊抖可以單獨設定,當四個邊相交的時候他們是什麼時候改變的?t0 通過demo可以看到border的相交的地方在45deg平分,當元素的width 和height屬性唄設定為0的時候 t1 ...

使用border 畫三角形

先看看效果 step1 首先我們定義乙個div step2 設定一下div的初始樣式 效果是這個樣子 step3 修改css width 0px height 0px border width 50px 效果這個樣子 step4 修改border顏色 border color red transpa...