纯css图标

Posted 2023-03-16 等风来

/*对号*/
.gou
    width: 9px;
    height: 18px;
    border-right:2px solid #f39800;
    border-bottom:2px solid #f39800;
    transform: rotate(40deg);


/*叉号*/
.cha
    width: 20px;
    height: 20px;
    margin: auto;
    position: relative; 

.cha::before,
.cha::after
  content: "";
  position: absolute;  /*方便进行定位*/
  height: 20px;
  width: 1.5px;
  top: 2px;
  right: 9px;  /*设置top和right使图像在20*20框中居中*/
  background: #f39800;

.cha::before
  transform: rotate(45deg);  /*进行旋转*/

.cha::after
  transform: rotate(-45deg);


/*上三角*/
.triangle
    position: relative;

.triangle::after 
    content: \'\';
    width: 0;
    height: 0;
    border: 0.5rem solid transparent;
    border-bottom: 0.5rem solid #000;
    position: absolute;
    top: -1rem;
    left: 48%;
    transform: translateX(-50%);
    z-index: 100;


/*大于号*/
.greater
    position: relative;

.greater:after
    content: \'\';
    width: 12px;
    height: 12px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    border-left: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: translate(0,-50%) rotate(-135deg);

很多图标也可以通过content字符实现，例如 通过css实现对勾（√）和叉号（×）, 能用content字符实现的图标有，各种箭头，大于小于号，对号(样式有问题)，叉号，各种三角，星号，

雪花，象棋，扑克牌，希腊字母，天空，植物，手型，铅笔，笔型，十字等，可首选content字符来实现图标。

 

出处：简单的使用css画勾、叉、三角、大于号