css3技巧系列之 (一)span实现常用图标

今天写这篇文章的目的在于对css样式的熟悉，同时也做下记录，方便后续用到即可复制来用，多用于图标相关。

三角形

    .triangle-up {
        display: inline-block;
        margin-left: 20px;
        width: 0;
        height: 0;
        border-right: 20px solid transparent;
        border-bottom: 30px solid #409eff;
        border-left: 20px solid transparent;
      }
    .triangle-right {
        display: inline-block;
        margin-left: 20px;
        width: 0;
        height: 0;
        border-top: 20px solid transparent;
        border-left: 30px solid #409eff;
        border-bottom: 20px solid transparent;
      }
      .triangle-left {
        display: inline-block;
        margin-left: 20px;
        width: 0;
        height: 0;
        border-right: 20px solid transparent;
        border-top: 30px solid #409eff;
        border-left: 20px solid transparent;
      }
      .triangle-bottom {
        display: inline-block;
        margin-left: 20px;
        width: 0;
        height: 0;
        border-top: 20px solid transparent;
        border-right: 30px solid #409eff;
        border-bottom: 20px solid transparent;
      }

效果图

类返回箭头

  .childItem {
        /* border: 1px solid red; */
        display: block;
        width: 32px;
        height: 32px;
      }
      .curvedarrow {
        position: relative;
        width: 0;
        height: 0;
        border-top: 9px solid transparent;
        border-right: 9px solid rgb(157, 255, 0);
        transform: rotate(10deg);
      }

      .curvedarrow:after {
        position: absolute;
        top: -12px;
        left: -9px;
        width: 12px;
        height: 12px;
        content: "";
        border: 0 solid transparent;
        border-top: 3px solid rgb(157, 255, 0);
        border-radius: 20px 0 0 0;
        transform: rotate(45deg);
      }
      .curvedarrow:before {
        position: absolute;
        content: "";
        width: 20px;
        height: 30px;
        z-index: 1;
        background: white;
      }

效果图

六边形

  .hexagon {
        position: relative;
        display: block;
        width: 100px;
        height: 55px;
        background-color: rgb(235, 135, 205);
      }

      .hexagon:before {
        position: absolute;
        top: -25px;
        left: 0;
        width: 0;
        height: 0;
        content: "";
        border-right: 50px solid transparent;
        border-bottom: 25px solid rgb(235, 135, 205);
        border-left: 50px solid transparent;
      }

      .hexagon:after {
        position: absolute;
        bottom: -25px;
        left: 0;
        width: 0;
        height: 0;
        content: "";
        border-top: 25px solid rgb(235, 135, 205);
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
      }

效果图

心形

.heart {
        position: relative;
        display: block;
        width: 100px;
        height: 90px;
      }

      .heart:before,
      .heart:after {
        position: absolute;
        left: 50px;
        top: 0;
        width: 50px;
        height: 80px;
        content: "";
        background-color: rgb(240, 14, 14);
        border-radius: 50px 50px 0 0;
        transform: rotate(-45deg);
        transform-origin: 0 100%;
      }

      .heart:after {
        left: 0;
        transform: rotate(45deg);
        transform-origin: 100% 100%;
      }

效果图

无穷大(麻花)

.infinity {
        position: relative;
        display: block;
        width: 150px;
        height: 100px;
        box-sizing: content-box;
      }

      .infinity:before,
      .infinity:after {
        position: absolute;
        top: 0;
        left: 0;
        width: 30px;
        height: 30px;
        content: "";
        border: 20px solid rgb(41, 7, 196);
        border-radius: 50px 50px 0 50px;
        box-sizing: content-box;
        transform: rotate(-45deg);
      }

      .infinity:after {
        left: auto;
        right: 0;
        border-radius: 50px 50px 50px 0;
        transform: rotate(45deg);
      }

效果图

钻石效果

 .diamond {
        position: relative;
        display: block;
        width: 50px;
        height: 0;
        border-width: 0 25px 25px 25px;
        border-style: solid;
        border-color: transparent transparent rgb(218, 104, 199) transparent;
        box-sizing: content-box;
      }

      .diamond:after {
        position: absolute;
        top: 25px;
        left: -25px;
        width: 0;
        height: 0;
        content: "";
        border-width: 70px 50px 0 50px;
        border-style: solid;
        border-color: rgb(218, 104, 199) transparent transparent transparent;
      }

效果图

丝带徽章

  .badge-ribbon {
        position: relative;
        display: block;
        height: 100px;
        width: 100px;
        background-color: rgb(212, 9, 9);
        border-radius: 50%;
      }

      .badge-ribbon:before,
      .badge-ribbon:after {
        position: absolute;
        top: 70px;
        left: -10px;
        content: "";
        border-right: 40px solid transparent;
        border-bottom: 70px solid rgb(13, 218, 40);
        border-left: 40px solid transparent;
        transform: rotate(-140deg);
        z-index: -1;
      }

      .badge-ribbon:after {
        right: -10px;
        left: auto;
        transform: rotate(140deg);
      }

效果图

指示器

    .pointer {
        position: relative;
        display: block;
        width: 120px;
        height: 40px;
        background-color: rgb(62, 23, 153);
      }

      .pointer:before {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 0;
        content: "";
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 20px solid #fff;
      }

      .pointer:after {
        position: absolute;
        right: -20px;
        bottom: 0;
        width: 0;
        height: 0;
        content: "";
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 20px solid rgb(62, 23, 153);
      }

效果图

以上为今天css效果图展示，如果喜欢，欢迎留言，记录下来以备不时之需。也可关注公众号获取更多资源。