CSS3实现三角形、尖括号

100人浏览 2024-12-01 14:15:18

一、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;
}