css绘制各种图形

15 Sep 2018 in Blog

使用 CSS 可以绘制出许多形状，比如三角形、梯形、圆形、椭圆等，并不只是可以绘制矩形。下面列举一些基本形状和组合形状。基本形状是比较容易实现的，而利用这些基本形状进行组合，就可以实现稍微复杂点的组合形状。

一、基础形状

1、三角形

.triangle {
    width: 0;
    height: 0;
    border: 50px solid #4fb1ba;
    /* 通过改变边框颜色，可以改变三角形的方向 */
   border-color: transparent transparent #4fb1ba transparent;
    /* border-color: transparent transparent transparent #4fb1ba; */
    /* border-color: #4fb1ba transparent transparent transparent; */
    /* border-color: transparent #4fb1ba transparent transparent; */
}

2、梯形

梯形由三角形设置宽度(高度)演变而来

.trapzoid {
    width: 30px;
    height: 0;
    border: 35px solid #4fb1ba;
    border-color: transparent transparent #4fb1ba transparent;
}

3、圆形

.circle{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #4fb1ba;
}

4、椭圆

由圆形变换宽度(高度)而来

.ellipse {
    width: 150px;
    height: 100px;
    border-radius: 50%;
    background: #4fb1ba;
}

5、半圆

由圆形设置半径而来

.semicircle {
    width: 50px;
    height: 100px;
    /*  "/"前四个值表示圆角的水平半径，后四个值表示圆角的垂直半径*/
    border-radius: 200% 0 0 200% / 100% 0 0 100%;
    /* 效果和用%一样 */
    /* border-radius: 50px 0 0 50px; */
    background: #4fb1ba;
}

6、四分之一圆

由圆形设置半径而来

.quartercircle {
    width: 50px;
    height: 50px;
    border-radius: 50px 0 0 0;
    background: #4fb1ba;
}

7、球体

由圆形设置背景色渐变而来

.sphere {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background: radial-gradient(circle at 70px 70px, #4fb1ba, #000);
}

8、矩形

.rectangle {
    width: 100px;
    height: 100px;
    background: #4fb1ba;
}

9、菱形

菱形由矩形旋转而来

.rhombus {
    width: 100px;
    height: 100px;
    transform: rotateZ(45deg) skew(10deg, 10deg);
    background: #4fb1ba;
}

10、平行四边形

平行四边形由矩形切斜而来

.parallelogram {
    width: 100px;
    height: 70px;
    transform: skew(30deg);
    background: #4fb1ba;
}

综上所述：基础形状只有三角形、矩形和圆形构成，其余的都是由他们变化而来。

二、组合形状

1、心形

心形由两个圆形和一个矩形进行组合而来

.heart {
  width: 70px;
  height: 70px;
  margin: 60px 0 0 50px;
  transform: rotateZ(45deg);
  background: red;
}
.heart::after,
.heart::before {
  content: "";
  position: absolute;
  top: -50%;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: red;
}
.heart::before {
  top: 0;
  left: -50%;
}

2、扇形

扇形由一个圆形和一个矩形进行组合而来，用矩形遮住圆形的一部分就形成了扇形

.sector {
    width: 120px;
    height: 120px;
    /* 这里的背景色要与扇形外的背景色一致 */
    background: #fff;
    border-radius: 50%;
    background-image: linear-gradient(to right, transparent 50%, #4fb1ba 0);
}
.sector::before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    margin-left: 50%;
    background-color: inherit;
    transform-origin: left;
    /*调整角度，改变扇形大小*/
    transform: rotate(230deg);
}

3、五边形

五边形由一个三角形和一个梯形进行组合而来

.pentagonal {
    position: relative;
    width: 70px;
    margin-top: 55px;
    border-width: 65px 30px 0;
    border-style: solid;
    border-color: #4fb1ba transparent;
}
.pentagonal:before {
    content: "";
    position: absolute;
    top: -115px;
    left: -30px;
    width: 0;
    height: 0;
    border-width: 0px 65px 50px;
    border-style: solid;
    border-color: transparent transparent #4fb1ba;
}

4、六边形

六边形由上面（左面）一个三角形，中间一个矩形，下面（右面）一个三角形进行组合而来

.hexagon {
    position: relative;
    width: 100px;
    height: 50px;
    background-color: #4fb1ba;
}
.hexagon:before {
    content: "";
    position: absolute;
    top: -30px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 30px solid #4fb1ba;
}
.hexagon:after {
    content: "";
    position: absolute;
    top: 50px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 30px solid #4fb1ba;
}

5、五角星

五角星由三个三角形组合而来

.star-five {
  position: relative;
  width: 0;
  height: 0;
  margin: 0 80px;
  border-bottom: 68px solid red;
  border-left: 23px solid transparent;
  border-right: 23px solid transparent;
}
.star-five:before {
  content: "";
  position: absolute;
  top: 61px;
  left: -97px;
  height: 0;
  width: 0;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(35deg);
}
.star-five:after {
  content: "";
  position: absolute;
  top: 61px;
  left: -103px;
  width: 0;
  height: 0;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(-35deg);
}

6、六角星

六角星由两个三角形组合而来

.star-six {
  position: relative;
  width: 0;
  height: 0;
  border-right: 50px solid transparent;
  border-bottom: 90px solid #fcc200;
  border-left: 50px solid transparent;
}
.star-six:before {
  content: "";
  position: absolute;
  top: 30px;
  left: -50px;
  width: 0;
  height: 0;
  border-right: 50px solid transparent;
  border-bottom: 90px solid #fcc200;
  border-left: 50px solid transparent;
  transform: rotate(180deg);
}

7、无限符图形(Infinity)

无限符图形由两个正方形改变边框radius组合而来

.infinity:before,
.infinity:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  border: 10px solid #4fb1ba;
  border-radius: 50px 50px 0 50px;
  transform: rotate(-45deg);
}
.infinity:after {
  left: 98px;
  border-radius: 50px 50px 50px 0;
  transform: rotate(45deg);
}

8、鸡蛋

鸡蛋由一个矩形改变radius而来

.egg {
  width: 126px;
  height: 180px;
  background-color: #fbcc7d;
  /* 前四个值表示圆角的水平半径，后四个值表示圆角的垂直半径 */
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

9、月亮

月亮由一个圆增加shadow而来

.moon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 #ffeb5d;
}

10、聊天框

聊天框由一个矩形和三角形组合而来

.talkbubble {
  position: relative;
  width: 120px;
  height: 80px;
  background: #4fb1ba;
  border-radius: 10px;
}
.talkbubble:before {
  content: "";
  position: absolute;
  top: 26px;
  left: 120px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-left: 26px solid #4fb1ba;
  border-bottom: 13px solid transparent;
}

11、阴阳八卦

阴阳八卦由三个圆组合而来

.bagua {
  position: relative;
  width: 96px;
  height: 48px;
  border-width: 2px 2px 50px 2px;
  border-style: solid;
  border-color: #000;
  border-radius: 50%;
  background: #fff;
}
.bagua:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  border: 18px solid #000;
  border-radius: 50%;
  background: #fff;
}
.bagua:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border: 18px solid #fff;
  border-radius: 50%;
  background: #000;
}

12、徽章丝带

徽章丝带由一个圆和两个三角形组合而来

.badge-ribbon {
  position: relative;
  height: 100px;
  width: 100px;
  border-radius: 50px;
  background: red;
}
.badge-ribbon:before,
.badge-ribbon:after {
  content: "";
  position: absolute;
  top: 80px;
  left: -10px;
  border-bottom: 70px solid red;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  transform: rotate(-140deg);
}
.badge-ribbon:after {
  left: auto;
  right: -10px;
  transform: rotate(140deg);
}

13、放大镜

放大镜由一个圆和一个矩形组合而来

.magnifying-glass {
  position: relative;
  width: 40px;
  height: 40px;
  border: 10px solid #4fb1ba;
  border-radius: 40px;
}
.magnifying-glass::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 30px;
  width: 35px;
  height: 10px;
  background: #4fb1ba;
  transform: rotate(45deg);
}

14、圆柱体

圆柱体由二个椭圆和一个圆角矩形合而来

.cylinder {
  position: relative;
  transform: rotateX(110deg);
  margin-top: 40px;
}
.ellipse-top,
.ellipse-down {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: deepskyblue;
}
.rectangle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 450px;
  border-radius: 50px;
  background: deepskyblue;
  opacity: 0.6;
}
.ellipse-up {
  transform: translateY(250px);
}

15、四棱锥

四棱锥由一个矩形和四个三角形组合而来

.pyramid {
  width: 100px;
  width: 100px;
  margin-left: 40px;
  transform-style: preserve-3d;
  transform: rotateX(-10deg) rotateY(-30deg);
}
.pyramid div {
  position: absolute;
  top: -50px;
  left: 0;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-width: 100px;
  opacity: 0.8;
}
.pyramid .front {
  transform: translateZ(50px) rotateX(30deg);
  border-bottom-color: #ffff00;
  transform-origin: 0 100%;
}
.pyramid .back {
  transform: translateZ(-50px) rotateX(-30deg);
  border-bottom-color: #00e600;
  transform-origin: 0 100%;
}
.pyramid .left {
  transform: translateX(-50px) rotateZ(30deg) rotateY(90deg);
  border-bottom-color: #0001cf;
  transform-origin: 50% 100%;
}
.pyramid .right {
  transform: translateX(50px) rotateZ(-30deg) rotateY(90deg);
  border-bottom-color: #fe0000;
  transform-origin: 50% 100%;
}
.pyramid .bottom {
  width: 100px;
  height: 100px;
  top: 0;
  border: 0;
  transform: translateX(-50px) rotateZ(90deg) rotateY(90deg);
  background: #e65c01;
  transform-origin: 50% 100%;
}

16、正方体

正方体由六个正方形组合而来

.cubo {
  width: 100px;
  height: 100px;
  margin: 30px;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(-30deg);
}
.cubo div {
  position: absolute;
  width: 100px;
  height: 100px;
  opacity: 0.8;
}
.cubo .front {
  transform: translateZ(50px);
  background: #ffff00;
}
.cubo .back {
  transform: translateZ(-50px);
  background: #e6e6e6;
}
.cubo .left {
  transform: rotateX(90deg) rotateY(90deg) translateZ(-50px);
  background: #0001cf;
}
.cubo .right {
  transform: rotateX(90deg) rotateY(90deg) translateZ(50px);
  background: #00e600;
}
.cubo .top {
  transform: rotateX(90deg) translateZ(50px);
  background: #fe0000;
}
.cubo .bottom {
  transform: rotateX(-90deg) translateZ(50px);
  background: #e65c01;
}