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

2014-10-30 腳印網頁資訊設計

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

梯形

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

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

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

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

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

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

正三角形

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

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

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

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

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

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

斜邊在盒子的對角線上

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

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

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

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

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

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

直角三角形

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

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

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

等腰三角形

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

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

.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 來產生三角形，並以父元素定位，依此來調整三角形要出現的位置。

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

.dialog-bottom {
    background: #888888;
    height: 62px;
    margin-bottom: 10px;
    position: relative;
    width: 90px;
}
.dialog-bottom::after {
    border-color: #888888 #888888 transparent transparent;
    border-style: solid solid solid solid;
 
    /* 設定邊框大小可拼湊出任意形狀的三角形 */
    border-width: 13px 8px;
 
    bottom: -20px;
 
    /* 必須指定，才能顯示內容 */
    content: "";
 
    height: 0px;

 
    /* 必須指定，否則會變梯形 */
    position: absolute;
        left: 46px;
        left: 30px;
    width: 0px;
}

左尖角

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

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

.dialog-left {
    background: #888888;
    height: 90px;
    margin: 0 40px;
    position: relative;
    width: 50px;
}
.dialog-left::before {
    border-color: transparent #888888 #888888 transparent; 
    border-style: solid; 
    border-width: 20px;
 
    /* 必須指定，才能顯示內容 */
    content: "";
 
    height: 0px;
 
    /* 必須指定，否則會變梯形 */
    position: absolute;
        top: 35px;
        left: -40px;

    width: 0px;
}
.dialog-left::after {
    border-color: transparent #fff #fff transparent; 
    border-style: solid solid solid solid; 
    border-width: 8px 20px;
 
    /* 必須指定，才能顯示內容 */
    content: "";
 
    height: 0px;
 
    /* 必須指定，否則會變梯形 */
    position: absolute;
        top: 59px;
        left: -40px;

    width: 0px;

下三角 (邊框式)

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

HTML：

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

CSS：

.dialog-border-bottom {
    border: 5px solid #888888;
    height: 65px;
    margin-bottom: 10px;
    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;
 
    /* 必須指定，否則會變梯形 */
    position: absolute;
        left: 17px; 
 
    width: 0px;
}
.dialog-border-bottom:after {
    border-color: #fff transparent transparent; 
    border-style: solid solid solid solid; 
    border-width: 20px; 
 
    /* 必須指定，才能顯示內容 */
    content: "";
 
    height: 0px;
 
    /* 必須指定，否則會變梯形 */
    position: absolute;
        left: 17px;
        bottom: -33px;

    width: 0px;
}

參考

CSS三角形的实现原理及运用-前端开发博客

CSS

本著作係採用創用 CC 姓名標示-相同方式分享 3.0 台灣授權條款授權.

腳印網頁資訊設計

SEO 行銷導向網頁設計

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

梯形

正三角形

斜邊在盒子的對角線上

直角三角形

等腰三角形

對話框

下尖角

左尖角

下三角 (邊框式)

參考

在〈使用 CSS border 製作梯形、三角形、對話框〉中有 1 則留言

發表留言取消回覆

加入 LINE @ 好友

即時傳訊息問答回覆