border標籤實現三角形效果

2021-10-08 17:55:00 字數 698 閱讀 5680

>

>

div>

body

>

div{/*完全居中*/

position

:absolute;

top:50%;

left

:50%;

margin-top

:100px;

margin-left

:100px;

width

:0;height

:0;/**border-width:"100px";

border-style:"solid";

border-color:"red yellow blue green";**/

border

:100px solid transparent;

border-bottom-color

:black;

注釋部分:

將其他三個方向的顏色值設定為透明transparent,

設定其中乙個方向的顏色為黑色

得到效果圖如下:

border實現三角形的原理

前言 網上最普遍的實現三角形的方法,就是通過控制border來實現,那為什麼可以呢?我們先來看看border的表現形式。觀察上圖可以發現,border表現為梯形。當減小box的寬高時,會發生如下變化 從上圖很容易看出,當box寬度降低到很小,也就是border的梯形的上邊降到很小。所以想一想,當這一...

使用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...