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

976 阅读3分钟

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

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

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

三角形系列

直角三角形(左上)

image.png

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

直角三角形(左下)

image.png

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

直角三角形(右上)

image.png

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

直角三角形(右下)

image.png

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

等边三角形(向上)

image.png

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

等边三角形(向下)

image.png

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

等边三角形(向左)

image.png

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

等边三角形(向右)

image.png

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

四边形系列

梯形

image.png

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

平行四边形

image.png

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

菱形(方版)

image.png

#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;
    }

菱形(长版)

image.png

#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;   /*注意这一句*/
   }

圆形系列

椭圆

image.png

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

鸡蛋圆

image.png

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

其他系列

指向

image.png

#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;
}

心形

image.png

#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%;
}

月形

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

image.png

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

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