CSS3实现三角形、尖括号（html三角形）

一、border实现实心三角形效果

1.其中宽度（width）、高度（height）均需要设置为0；

2.4个边框都要写，只保留需要的边框的颜色，但是不能省略，不需要的可以设置为透明；

3.加上font-size:0;line-height:0;解决兼容性问题。

当宽高均为0时，设置上右下左四个边框，将会形成一个由四个三角形构成的矩形，如果四个边框的border-size属性值均一致，则会形成一个由四个三角形构成的正方形。

例：

二、尖括号的实现

1、通过border设置边框，利用CSS中的转换进行旋转。

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