使用純CSS創建三角形形狀

• 2019 年 12 月 27 日
• 筆記

如何在頁面中實現三角形，有以下幾種方式；

一、使用css繪製三角形

HTML程式碼：

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

CSS程式碼：

（1）箭頭向上

.triangle {    width: 0;    height: 0;    border-bottom: 20px solid #333;    border-left: 20px solid transparent;    border-right: 20px solid transparent;  }

（2）箭頭向右

.triangle {    width: 0;    height: 0;    border-left: 20px solid #333;    border-top: 20px solid transparent;    border-bottom: 20px solid transparent;  }

（3）箭頭向下

.triangle {    width: 0;    height: 0;    border-top: 20px solid #333;    border-left: 20px solid transparent;    border-right: 20px solid transparent;  }

（4）箭頭向左

.triangle {    width: 0;    height: 0;    border-right: 20px solid #333;    border-top: 20px solid transparent;    border-bottom: 20px solid transparent;  }

（5）箭頭向右上

.triangle {    width: 0;    height: 0;    border-right: 20px solid #333;    border-left: 20px solid transparent;    border-bottom: 20px solid transparent;  }

（6）箭頭向右下

.triangle {    width: 0;    height: 0;    border-right: 20px solid #333;    border-left: 20px solid transparent;    border-top: 20px solid transparent;  }

（7）箭頭向左下

.triangle {    width: 0;    height: 0;    border-left: 20px solid #333;    border-right: 20px solid transparent;    border-top: 20px solid transparent;  }

（8）箭頭向左上

.triangle {    width: 0;    height: 0;    border-left: 20px solid #333;    border-right: 20px solid transparent;    border-bottom: 20px solid transparent;  }

顏色調整更改#333，更改為合適顏色。

二、使用圖片

圖片方式就是由美工設計並製作，利用css程式碼通過背景圖片來實現

實例圖片：

示例程式碼

HTML：

<div id="box"></div>

CSS：

#box{      width: 400px;      height: 300px;      border:solid 2px #999;      border-radius: 5px;      margin:0 auto;      background:url('./ershisi.png');      background-size: 50%;      background-repeat: no-repeat;      background-position: 30px 30px;  }