一、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
,
