用css画常用的图标

迈不过友情╰ 2022-01-20 09:27 256阅读 0赞

工作中经常会用到箭头，加号，三角形等，直接让ui给出设计图icon当然可以，但是牵扯到对齐等操作，对图片的操作显然没有对div（小程序view）来的方便，所以我就在网上找了一些方法，个人仅做整理，并非原创，让我们开始！

**箭头**

// html
    <div class="arrow right"></div>
    <div class="arrow left"></div>
    <div class="arrow on"></div>
    <div class="arrow under"></div>
    // css
    .arrow {  
        width:20px;
        height:20px;
        border-top:2px solid #000;
        border-right:2px solid #000;
    }
    .right {transform:rotate(45deg)}
    .left {transform:rotate(-135deg)}
    .on {transform:rotate(-45deg)}
    .under {transform:rotate(135deg)}复制代码

**删除**

// html
    <div class="x"></div>
    // css
    .x {
        width:50px;
        height:50px;
        position: relative;
        background-color: rgba(169, 169, 169, .2);
        border-radius: 50%;
    }
    .x::before,.x::after{
        content: "";
        position: absolute;  /*方便进行定位*/
        background-color: #888;
        height: 30px;
        width: 2px;
        top: 50%;
        left: 50%;
        margin-top: -15px;
        margin-left: -1px;
    }
    .x::before{transform: rotate(45deg);  /*进行旋转*/}
    .x::after{transform: rotate(-45deg);}
    复制代码

**三角形**

// html
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
    <div class="yellow"></div>
    // css
    div {  
        width: 0;
        height: 0;
        border-width: 40px;
        border-style: solid;
        box-sizing: border-box;
        margin-top: 20px;
    }
    .red {border-color:  red transparent transparent transparent;} 
    .blue {border-color:  transparent blue transparent transparent;}
    .green {border-color:  transparent transparent green transparent;}
    .yellow {border-color:  transparent transparent transparent yellow;}复制代码

**加号**➕

// html
    <div class="add"></div>
    // css
    .add {
      border: 1px solid;
      width: 100px;
      height: 100px;
      color: #ccc;
      transition: color .25s;
      position: relative;
    }
    .add::before{
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 80px;
      margin-left: -40px;
      margin-top: -5px;
      border-top: 10px solid;
    }
    .add::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      height: 80px;
      margin-left: -5px;
      margin-top: -40px;
      border-left: 10px solid;
    }
    .add:hover {
      color: blue;
    }
    // 附原文网址：https://blog.csdn.net/Helloyongwei/article/details/83242871 如有侵权请告知删除复制代码