使用 CSS border 製作梯形、三角形、對話框

早期製作網站需使用到「梯形、三角形、對話框」時,都是使用圖像,遇到要修改時還得開啟圖檔,總是很不方便。現在則可以利用 CSS border 製作梯形、三角形、對話框,是不是方便許多。

css-border-trapezoid-triangle-dialog_00

梯形

分別設定 border-color 上、右、下、左為不同的顏色,而中間的正方形(白色部份)為 height width

/* 梯形 */
.trapezoid {
    border-color: #FF8000 #FF0000 #00FF00 #0000FF;
    border-style: solid solid solid solid;
    border-width: 30px;

    /* 設定 width、height 可更好理解原理 */
    height: 30px;
    width: 30px;
}
<div class="trapezoid"></div>

現在我們將 border-color 上、右、下,設定為 transparent(透明),即可取得所需方向的梯形

/* 梯形 */
.trapezoid-2 {
    border-color: transparent transparent transparent #0000FF;
    border-style: solid solid solid solid;
    border-width: 30px;

    /* 設定 width、height 可更好理解原理 */
    height: 30px;
    width: 30px;
}
<div class="trapezoid-2"></div>

正三角形

與梯形不同的地方在於,將 height width 設為 0,即可呈現正三角形

/* 正三角形 */
.triangle {
    border-color: #FF8000 #FF0000 #00FF00 #0000FF;
    border-style: solid solid solid solid;
    border-width: 45px;

    /* 設定 width、height 可更好理解原理 */
    height: 0px;
    width: 0px;
}
<div class="triangle"></div>

現在我們將 border-color 上、右、下,設定為 transparent(透明),即可取得所需方向的正三角形

/* 正三角形 */
.triangle-1 {
    border-color: transparent transparent transparent #0000FF;
    border-style: solid solid solid solid;
    border-width: 45px;

    /* 設定 width、height 可更好理解原理 */
    height: 0px;
    width: 0px;
}
<div class="triangle-1"></div>

斜邊在盒子的對角線上

斜邊由設定 border-clolr border-width 上、右二個顏色與方向的尺寸來呈現這種效果。

/* 斜邊在盒子的對角線上 */
.triangle2 {
    /*border-color: #FF0000 transparent transparent transparent;*/
    border-color: #FF0000 #00FF00 transparent transparent;
    border-style: solid solid solid solid;

    /* 設定邊框大小可拼湊出任意形狀的三角形 */
    border-width: 90px 90px 0px 0px;

    /* 設定 width、height 可更好理解原理 */
    height: 0px;
    width: 0px;
}
<div class="triangle2"></div>

現在我們將 border-color 右,設定為 transparent,即可取得另一邊的三角形。

/* 斜邊在盒子的對角線上 */
.triangle2-2 {
    /*border-color: #FF0000 transparent transparent transparent;*/
    border-color: #FF0000 transparent transparent transparent;
    border-style: solid solid solid solid;

    /* 設定邊框大小可拼湊出任意形狀的三角形 */
    border-width: 90px 90px 0px 0px;

    /* 設定 width、height 可更好理解原理 */
    height: 0px;
    width: 0px;
}
<div class="triangle2-2"></div>

直角三角形

border-color 上、右,設定為相同顏色,border-width 依上、下;左、右,各為一群組,相同群組須設定為相同尺寸。

/* 直角三角形 */
.triangle3 {
    border-color: #FF0000 #FF0000 transparent transparent;
    border-style: solid solid solid solid;

    /* 設定邊框(上、下;左、右)大小相同的數值,可拼湊出任意形狀的三角形 */
    border-width: 45px 10px 45px 10px; 

    /* 設定 width、height 可更好理解原理 */
    height: 0px; 
    width: 0px; 
}
<div class="triangle3"></div>

等腰三角形

僅設定 border-color 上,一個方向的顏色,border-width 依上、下;左、右,各為一群組,相同群組須設定為相同尺寸。

/* 等腰三角形 */
.triangle4 {
    border-color: #FF0000 transparent transparent transparent;
    border-style: solid solid solid solid; 

    /* 設定邊框依上、下;左右,各為一群組,相同群組須設定為相同尺寸,調整尺寸可拼湊出任意形狀的三角形 */
    border-width: 45px 10px 45px 10px; 

    /* 設定 width、height 可更好理解原理 */
    height: 0px; 
    width: 0px; 
}
<div class="triangle4"></div>

對話框(下尖角)

先設定元素的定位方式 position: relative;,在使用虛擬元素 :after 來產生三角形,並以父元素定位,依此來調整三角形要出現的位置。

/* 對話框(下尖角) */
.dialog-bottom {
    margin-bottom: 40px;
    width: 90px;
    height: 62px;
    background: #888888;
    position: relative;
}
.dialog-bottom:after {
    border-color: #888888 #888888 transparent transparent;
    border-style: solid solid solid solid;

    /* 設定邊框大小可拼湊出任意形狀的三角形 */
    border-width: 15px 10px 15px 10px;

    bottom: -29px;

    /* 必須指定,才能顯示內容 */
    content: "";

    height: 0px;
    left: 30px;

    /* 必須指定,否則會變梯形 */
    position: absolute;

    width: 0px;
}
<div class="dialog-bottom"></div>

對話框(左尖角)

基本上與上例相同,但這裡多使用了一個虛擬元素 :before 用來蓋住另一個三角形,以取得另一種三角形

/* 對話框(左尖角) */
.dialog-left {
    background: #888888;
    margin: 0 40px;
    height: 90px;
    position: relative;
    width: 50px;
}
.dialog-left:before {
    border-color: transparent #888888 #888888 transparent; 
    border-style: solid; 
    border-width: 20px;

    /* 必須指定,才能顯示內容 */
    content: '';

    height: 0px;
    left: -40px;

    /* 必須指定,否則會變梯形 */
    position: absolute;
    top: 35px;
    width: 0px;
}
.dialog-left:after {
    border-color: transparent #fff #fff transparent; 
    border-style: solid solid solid solid; 
    border-width: 10px 20px;

    /* 必須指定,才能顯示內容 */
    content: '';

    height: 0px;
    left: -40px; 

    /* 必須指定,否則會變梯形 */
    position: absolute;

    top: 55px;
    width: 0px;
}
<div class="dialog-left"></div>

對話框,邊框式(下三角)

與上例一樣都使用了二個虛擬元素,而本例的另一個則是用來蓋住另一個三角形,用來實現對話邊框

/* 對話框,邊框式(下三角) */
.dialog-border-bottom {
    border: 5px solid #888888;
    height: 65px;
    position: relative;
    width: 80px;
}
.dialog-border-bottom:before {
    border-color: #888888 transparent transparent; 
    border-style: solid solid solid; 
    border-width: 20px 20px 20px 20px; 
    bottom: -40px;

    /* 必須指定,才能顯示內容 */
    content: '';

    height: 0px;
    left: 20px; 

    /* 必須指定,否則會變梯形 */
    position: absolute;

    width: 0px;
}
.dialog-border-bottom:after {
    border-color: #fff transparent transparent; 
    border-style: solid solid solid solid; 
    border-width: 20px; 
    bottom: -33px;

    /* 必須指定,才能顯示內容 */
    content: '';

    height: 0px;
    left: 20px; 

    /* 必須指定,否則會變梯形 */
    position: absolute;

    width: 0px;
}
<div class="dialog-border-bottom"></div>

發表迴響