一、border實現實心三角形效果

1.其中寬度（width）、高度（height）均需要設置為0；

2.4個邊框都要寫，隻保留需要的邊框的顔色，但是不能省略，不需要的可以設置為透明；

3.加上font-size:0;line-height:0;解決兼容性問題。

當寬高均為0時，設置上右下左四個邊框，将會形成一個由四個三角形構成的矩形，如果四個邊框的border-size屬性值均一緻，則會形成一個由四個三角形構成的正方形。

例：

設置四個邊框border-szize屬性相同的代碼示例

border-size屬性相同時設置不同顔色的示例圖

設置上邊框為紅色，其它為透明的代碼示例

設置上邊框，其它為透明時的倒三角效果圖

二、尖括号的實現

1、通過border設置邊框，利用CSS中的轉換進行旋轉。

利用border rotate實現尖括号的代碼示例

利用border rotate實現尖括号的效果圖

2、利用字體圖标實現尖括号，打開https://icomoon.io/app/#/select網址，選擇自己需要的圖标，然後點擊右下角的generate fonts，接着點擊download下載字體圖标，然後解壓壓縮包，并将其中的font文件夾放到頁面的根目錄下，并将下列代碼複制到樣式文件或者内部樣式定義中。

@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?rt66ei'); src: url('fonts/icomoon.eot?rt66ei#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?rt66ei') format('truetype'), url('fonts/icomoon.woff?rt66ei') format('woff'), url('fonts/icomoon.svg?rt66ei#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; }

字體圖标實現尖括号代碼示例

字體圖标實現尖括号效果圖

僅以此作為學習筆記以及分享，如有需改進或者不妥之處，請多多指教。

1 0.01=1.01

1-0.01=0.99

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!