CSS | 4句CSS送你一个小月牙

这是我参与更文挑战的第2天，活动详情查看 更文挑战

整理一些经常用到的css形状，本篇主要是效果与代码，方便直接取用，实现思路后面在单独开文；

会一直更新，所以不收藏一下吗😘。

三角形系列

直角三角形（左上）

 #triangle-topleft {
      width: 0;
      height: 0;
      border-top: 100px solid #BAE0E3;
      border-right: 100px solid transparent;
    }

直角三角形（左下）

  #triangle-bottomleft {
      width: 0;
      height: 0;
      border-bottom: 100px solid #BAE0E3;
      border-right: 100px solid transparent;
    }

直角三角形（右上）

 #triangle-topright {
      width: 0;
      height: 0;
      border-top: 100px solid #BAE0E3;
      border-left: 100px solid transparent;
    }

直角三角形（右下）

 #triangle-bottomright {
      width: 0;
      height: 0;
      border-bottom: 100px solid #BAE0E3;
      border-left: 100px solid transparent;
    }

等边三角形（向上）

 #triangle-up {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 50px solid #BAE0E3;
    }

等边三角形（向下）

  #triangle-down {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-top: 50px solid #BAE0E3;
    }

等边三角形（向左）

  #triangle-left {
      width: 0;
      height: 0;
      border-top: 50px solid transparent;
      border-right: 50px solid #BAE0E3;
      border-bottom: 50px solid transparent;
    }

等边三角形（向右）

  #triangle-right {
      width: 0;
      height: 0;
      border-top: 50px solid transparent;
      border-left: 50px solid #BAE0E3;
      border-bottom: 50px solid transparent;
    }

四边形系列

梯形

#trapezoid {
      border-bottom: 100px solid #99CCFF;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      height: 0;
      width: 100px;
    }

平行四边形

 #parallelogram {
      width: 150px;
      height: 100px;
      transform: skew(20deg);
      background: #99CCFF;
    }

菱形（方版）

#diamond {
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-bottom-color: #99CCFF;
      position: relative;
      top: -50px;
    }
    #diamond:after {
      content: '';
      position: absolute;
      left: -50px;
      top: 50px;
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-top-color: #99CCFF;
    }

菱形（长版）

#diamond-narrow {
     width: 0;
     height: 0;
     border: 50px solid transparent;
     border-bottom: 70px solid #99CCFF;  /*注意这一句*/
     position: relative;
     top: -50px;
   }
   #diamond-narrow:after {
     content: '';
     position: absolute;
     left: -50px;
     top: 70px;
     width: 0;
     height: 0;
     border: 50px solid transparent;
     border-top: 70px solid #99CCFF;   /*注意这一句*/
   }

圆形系列

椭圆

  #oval {
      width: 200px;
      height: 100px;
      background: #FFCC99;
      border-radius: 100px / 50px;
    }

鸡蛋圆

 #egg {
      display: block;
      width: 126px;
      height: 180px;
      background-color: #FFCC99;
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    }

其他系列

指向

#pointer {
  width: 200px;
  height: 40px;
  position: relative;
  background: #66CCFF
}
#pointer:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid white;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
#pointer:before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid #66CCFF;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

心形

#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}

月形

点题，来画一个可爱的小月牙

#moon {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      box-shadow: 15px 15px 0 0 red;
    }
  

---

小可爱看完就点个赞再走吧！🤞🤞🤞