用 CSS 实现各种几何图形

一、用 CSS 实现各种 圆、椭圆图形

在实现圆、椭圆系列的几何图形时，主要使用了CSS盒子模型技术，反复使用border属性来实现各种效果。如上图，有饼图形、铜钱形、月牙形、椭圆形、渐变的圆球、半圆形。完整代码，参考如下：

<div class="ellipse">
  <div class="ell1"></div>
  <div class="ell2"><div></div></div>
  <div class="ell3"><div></div></div>
  <div class="ell4"><div></div></div>
  <div class="ell5"></div>
  <div class="ell6"></div>
  <div class="ell7"></div>
  <div class="ell8"></div>
</div>

/* 1 - 圆、椭圆系列 */
.ellipse>div {
  display: inline-block;
  text-align: center;
  margin: 0 15px;
  background: rgba(231, 102, 94, 1);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
}
.ell2>div {
  width: 50px;
  height: 50px;
  background: white;
  float: right;
  z-index: 9999;
}
.ell3>div {
  width: 30px;
  height: 30px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -15px;
  margin-left: -15px;
  background: white;
}
.ell4>div {
  width: 73px;
  height: 73px;
  border-radius: 50%;
  background: white;
  float: right;
}
.ellipse>.ell5 {
  width: 100px;
  height: 50px;
  border-radius: 50%;
}
.ellipse>.ell6 {
  width: 50px;
  height: 100px;
  border-radius: 50%;
}
.ellipse>.ell7 {
  width: 100px;
  height: 100px;
  /* 渐变色背景 */
  background: radial-gradient(rgba(231, 102, 94, 1) 0, rgba(231, 102, 94, 0.5) 50%, rgba(231, 102, 94, 0.2) 100%);
}
.ellipse>.ell8 {
  width: 50px;
  height: 100px;
  /* 前四个值表达圆角的水平半径，后四个值表示圆角的垂直半径 */
  border-radius: 200% 0 0 200% / 100% 0 0 100%;
}

二、用 CSS 实现各种多边形

多边形的实现，使用了两层div进行组合，用到了border，transform，overflow等属性。如上图，我们实现了直角三角形、等边三角形、梯形、不规则多边形、八边形、菱形等。完整代码，参考如下：

<div class="polygon">
  <div class="pol1"></div>
  <div class="pol2"><div></div></div>
  <div class="pol3"><div></div></div>
  <div class="pol4"><div></div></div>
  <div class="pol5"><div></div></div>
  <div class="pol6"><div></div></div>
  <div class="pol7"><div></div></div>
  <div class="pol8"><div></div></div>
</div>

/* 2 - 多边形系列 */

.polygon>div {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 0 15px;
  /* overflow: hidden; */
  position: relative;
  vertical-align: middle;
  text-align: center;
}
.pol1 {
  background: rgba(231, 102, 94, 1);
}
.pol2 {
    overflow: hidden;
}
.pol2>div {
  width: 0;
  height: 0;
  border: 100px solid transparent;
  border-left-color: rgba(231, 102, 94, 1);
}
.pol3>div {
  border-top: none;
  border-bottom: 100px solid rgba(231, 102, 94, 1);
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}
.pol4>div {
  width: 40px;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 100px solid rgba(231, 102, 94, 1);
}
.pol5>div {
  border-top: 50px solid rgba(231, 102, 94, 1);
  border-bottom: 50px solid rgba(231, 102, 94, 1);
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}
.pol6 {
    overflow: hidden;
}
.pol6>div {
  width: 100px;
  height: 100px;
  background: rgba(231, 102, 94, 1);
  transform: rotateZ(45deg);
}
.pol7>div {
  width: 80px;
  height: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: rgba(231, 102, 94, 1);
  transform: rotateZ(45deg);
}
.pol8>div {
  width: 80px;
  height: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: rgba(231, 102, 94, 1);
  /* 旋转与倾斜 */
  transform: rotateZ(45deg) skew(15deg,15deg);
}

三、用 CSS 实现较为复杂的平面图形和立体图形

如上图，我们实现了等五边形、等六边形、心星、扇形、立方体、圆柱体和立锥体。用到了 CSS3 的伪类选择器和伪元素选择器，还用到了transform-style, perspective, transform等属性。在 3D视角下，看到立体效果，这部分知识非常有趣味性。完整代码，参考如下：

<div class="group">
    <div class="gro1">
        <div></div><div></div><div></div><div></div><div></div>
    </div>
    <div class="gro2"></div>
    <div class="gro3"></div>
    <div class="gro4"></div>
    <div class="gro5">
        <div>上</div><div>下</div><div>左</div><div>右</div><div>前</div><div>后</div>
    </div>
    <div class="gro6"></div>
    <div class="gro7">
        <div></div><div></div><div></div><div></div>
    </div>
</div>

/* 3 - 组件图形 */
.group {
    margin-top: 120px;
}
.group>div {
    display: inline-block;
    margin: 0 15px;
    vertical-align: middle;
}
.group>.gro1 {
    width: 120px;
    height: 120px;
    position: relative;
}
.gro1>div {
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -36.33px;
    border-top: 50px solid transparent;
    border-bottom: 50px solid rgba(231, 102, 94, 1);
    border-left: 36.4px solid transparent;
    border-right: 36.4px solid transparent;
}
.gro1>div:nth-child(2) {
    transform: rotateZ(72deg);
}
.gro1>div:nth-child(3) {
    transform: rotateZ(144deg);
}
.gro1>div:nth-child(4) {
    transform: rotateZ(216deg);
}
.gro1>div:nth-child(5) {
    transform: rotateZ(288.5deg);
}
.gro2 {
    height: 60px;
    width: 104px;
    background: rgba(231, 102, 94, 1);
    position: relative;
}
.gro2::before {
    content: '';
    width: 0;
    height: 0;
    border-top: none;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
    border-bottom: 30px solid rgba(231, 102, 94, 1);
    position: absolute;
    top: -30px;
    left: 0;
}
.gro2::after {
    content: '';
    width: 0;
    height: 0;
    border-bottom: none;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
    border-top: 30px solid rgba(231, 102, 94, 1);
    position: absolute;
    top: 60px;
    left: 0;
}
.group>.gro3 {
    width: 70px;
    height: 70px;
    background: rgba(231, 102, 94, 1);
    transform: rotateZ(45deg);
    position: relative;
    margin-left: 45px;
    margin-top: 15px;
}
.gro3::before {
    content: '';
    width: 70px;
    height: 70px;
    border-radius: 50%;
    position: absolute;
    left: -50%;
    background: inherit; /*继承*/
}
.gro3::after {
    content: '';
    width: 70px;
    height: 70px;
    border-radius: 50%;
    position: absolute;
    top: -50%;
    background: inherit;  /*继承*/
}
.gro4 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /* 线性渐变背景色 */
    background: linear-gradient(to right, transparent 50%, rgba(231, 102, 94, 1) 0%);
    position: relative;
}
.gro4::before {
    content: '';
    width: 100px;
    height: 100px;
    background: white;
    transform: rotateZ(45deg);
    position: absolute;
    top: -70.7px;
}
.group>.gro5 {
    transform-style: preserve-3d;
    perspective: 800px;  /*景深*/
    position: relative;
    transform: rotateX(50deg) rotateY(30deg) translateX(50px) translateY(-100px);
}
.gro5>div {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 100px;
    text-align: center;
    color: white;
    font-size: 24px;
}
.gro5>div:nth-child(1) {
    background: rgba(255,0,0,0.5);
    transform: translateZ(-50px);
}
.gro5>div:nth-child(2) {
    background: rgba(255,0,0,0.5);
    transform: translateZ(50px);
}
.gro5>div:nth-child(3) {
    background: rgba(0,255,0,0.5);
    transform: rotateY(90deg) translateZ(50px);
}
.gro5>div:nth-child(4) {
    background: rgba(0,255,0,0.5);
    transform: rotateY(-90deg) translateZ(50px);
}
.gro5>div:nth-child(5) {
    background: rgba(0,0,255,0.5);
    transform: rotateX(90deg) translateZ(-50px);
}
.gro5>div:nth-child(6) {
    background: rgba(0,0,255,0.5);
    transform: rotateX(-90deg) translateZ(-50px);
}
.group>.gro6 {
    margin-left: 200px;
}
.gro6 {
    width: 80px;
    height: 100px;
    background: red;
    position: relative;
    background: rgba(231, 102, 94, 0.8);
}
.gro6::before {
    content: '';
    width: 80px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    top: -20px;
    left: 0;
    background: rgba(231, 102, 94, 1);
}
.gro6::after {
    content: '';
    width: 80px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    bottom: -20px;
    left: 0;
    background: rgba(231, 102, 94, 0.9);
    /* z-index: -1; */
}
.group>.gro7 {
    transform-style: preserve-3d;
    perspective: 800px;   /*景深*/
    position: relative;
    transform: rotateX(20deg) rotateY(20deg) translateX(30px) translateY(-70px);
}
.gro7>div {
    position: absolute;
    top: -50px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom-width: 100px;
}
.gro7>div:nth-child(1) {
    transform: translateZ(50px) rotateX(30deg);
    border-bottom-color: rgba(255, 0, 0, 0.7);
    transform-origin: 0 100%;
}
.gro7>div:nth-child(2) {
    transform: translateZ(-50px) rotateX(-30deg);
    border-bottom-color: rgba(0, 255, 0, 0.7);
    transform-origin: 0 100%;
}
.gro7>div:nth-child(3) {
    transform: translateX(-50px) rotateZ(30deg) rotateY(90deg);
    border-bottom-color: rgba(0, 0, 255, 0.7);
    transform-origin: 50% 100%;
}
.gro7>div:nth-child(4) {
    transform: translateX(50px) rotateZ(-30deg) rotateY(90deg);
    border-bottom-color: rgba(231, 102, 94, 0.7);
    transform-origin: 50% 100%;
}

往期相关笔记推荐：

• 自定义组件之 Swiper 特效组件
• 手动实现 Swiper 视窗滑动效果
• 微信小程序 模拟打电话 实践
• 微信小程序 Animation 动画实践
• 小程序Canvas画布保存至相册
• CSS动画｜JavaScript动画｜小程序动画
• CSS3 | 选择器

本篇结束 2019年8月29日