CSS3实现三角形、尖括号

一、实现实心三角形效果

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

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

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

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

例：

设置四个边框-szize属性相同的代码示例

-size属性相同时设置不同颜色的示例图

设置上边框为红色，其它为透明的代码示例

设置上边框，其它为透明时的倒三角效果图

二、尖括号的实现

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

利用+实现尖括号的代码示例

利用+实现尖括号的效果图

2、利用字体图标实现尖括号，打开#/网址，选择自己需要的图标，然后点击右下角的 fonts，接着点击下载字体图标，然后解压压缩包，并将其中的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

———END———
限 时 特 惠： 本站每日持续更新海量各大内部创业教程，永久会员只需109元，全站资源免费下载 点击查看详情
站 长 微 信： nanadh666