使用 CSS border 製作梯形、三角形、對話框 - MIS 腳印
MIS 腳印 logo

MIS 腳印

記錄 IT 學習的軌跡

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

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

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

梯形

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

HTML:

<div class="trapezoid"></div>

CSS:

.trapezoid {
    border-color: #ff8000 #ff0000 #00ff00 #0000ff;
    border-style: solid solid solid solid;
    border-width: 30px;
 
    /* 設定 width、height 可更好理解原理 */
    height: 30px;
    width: 30px;
}

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

HTML:

<div class="trapezoid-2"></div>

CSS:

.trapezoid {
    border-color: #ff8000 #ff0000 #00ff00 #0000ff;
    border-style: solid solid solid solid;
    border-width: 30px;
 
    /* 設定 width、height 可更好理解原理 */
    height: 30px;
    width: 30px;
}

正三角形

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

HTML:

<div class="triangle"></div>

CSS:

.triangle {
    border-color: #ff8000 #ff0000 #00ff00 #0000ff;
    border-style: solid solid solid solid;
    border-width: 45px;
 
    /* 設定 width、height 可更好理解原理 */
    height: 0px;
    width: 0px;
}

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

HTML:

<div class="triangle-1"></div>

CSS:

.triangle-1 {
    border-color: transparent transparent transparent #0000ff;
    border-style: solid solid solid solid;
    border-width: 45px;
 
    /* 設定 width、height 可更好理解原理 */
    height: 0px;
    width: 0px;
}

斜邊在盒子的對角線上

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

HTML:

<div class="triangle2"></div>

CSS:

.triangle2 {
    border-color: #ff0000 #00ff00 transparent transparent;
    border-style: solid solid solid solid;
 
    /* 設定邊框大小可拼湊出任意形狀的三角形 */
    border-width: 90px 90px 0px 0px;
 
    /* 設定 width、height 可更好理解原理 */
    height: 0px;
    width: 0px;
}

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

HTML:

<div class="triangle2-2"></div>

CSS:

.triangle2-2 {
    border-color: #ff0000 transparent transparent transparent;
    border-style: solid solid solid solid;
 
    /* 設定邊框大小可拼湊出任意形狀的三角形 */
    border-width: 90px 90px 0px 0px;
 
    /* 設定 width、height 可更好理解原理 */
    height: 0px;
    width: 0px;
}

直角三角形

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

HTML:

<div class="triangle3"></div>

CSS:

.triangle3 {
    border-color: #ff0000 #ff0000 transparent transparent;
    border-style: solid solid solid solid;
 
    /* 設定邊框(上、下;左、右)大小相同的數值,可拼湊出任意形狀的三角形 */
    border-width: 45px 10px; 
 
    /* 設定 width、height 可更好理解原理 */
    height: 0px; 
    width: 0px; 
}

等腰三角形

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

HTML:

<div class="triangle4"></div>

CSS:


.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; 
}

對話框

下尖角

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

HTML:

<div class="triangle4"></div>

CSS:

.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;
}

左尖角

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

HTML:

<div class="dialog-left"></div>

CSS:

.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;
}

下三角 (邊框式)

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

HTML:

<div class="dialog-border-bottom"></div>

CSS:

.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;
}

參考

發表迴響