千变万化的div

<div>是HTML里再普通不过的一个元素了，但是如果加上各种属性的配合，那么它将会发出奇效，创造出千变万化的形状。下面我们就来感受下<div>的魅力.
注：以下所以样式均由一个<div>完成
效果图请点击

平平无奇的正方形与长方形

正方形与长方形没什么好介绍的，因为这个是本色演出。
1. 正方形

.square {
  width: 100px;
  height: 100px;
  background: #795548;
}

2. 长方形

.rectangle {
  width: 200px;
  height: 100px;
  background: #ff5722;
}

各种圆

包括正圆，椭圆，扇形等
主要原理：利用border-radius属性
1. 正圆
原理：正方形的四个角圆润之后就是圆形了

.circle {
  width: 200px;
  height: 200px;
  background: #ff9800;
  border-radius: 50%;
}

2. 椭圆
   原理：正方形可以变成正圆，如果长宽不等的话，则圆会变扁，形成椭圆。

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

3. 扇形
   原理：扇形其实就是圆的一部分；先利用border得到一个圆，然后再将多余部分利用transparent属性隐藏

.cone {
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-top: 100px solid #00bcd4;
  border-radius: 50%;
}

4. 弯月
   原理：也是圆的一部分；先得到一个无色的圆，利用box-shdow属性得到弯月形状；

.moon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 20px 20px 0 0 #2196f3;
}

一些简单直线型图形。三角形，梯形平行四边形

主要原理：利用方形<div>进行变形或者隐藏部分内容

1. 三角形
   原理：和扇形类似，其实三角形也是正方向或者长方形的四分之一，只要利用border四个边组成一个方形，然后再利用transparent隐藏其他三个边即可。

.triangle {
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 100px solid #ffeb3b;
}

2. 梯形
   原理：三角形的逆向原理。区别是三角形是利用border得到方形；梯形是利用方形增加border,取一个边即可。

.trapezoid {
  border-bottom: 100px solid #cddc39;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  height: 0;
  width: 100px;
}

3. 平行四边形

   原理：普通的<div>的2个边倾斜即可；利用transform属性的skwe值可以达到效果；

.parallelogram {
  width: 150px;
  height: 100px;
  transform: skew(20deg);
  background: #8bc34a;
}

组合图形：如五边形，十字架，聊天框等

原理：利用多个形状进行组合得到的形状；

1.五边形

原理：利用::after或者：：before；创造一个三角形加上梯形，（梯形的一边与三角形的一边相等）可以得到一个五边形；

�

.pentagon {
  position: relative;
  width: 54px;
  border-width: 50px 18px 0;
  border-style: solid;
  border-color: #4caf50 transparent;
}

.pentagon:before {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  top: -85px;
  left: -18px;
  border-width: 0 45px 35px;
  border-style: solid;
  border-color: transparent transparent #4caf50;
}

2.十字架

原理：利用::after或者：：before；创造2个矩形，进行位置偏移，即可得到。

�

.cross {
  width: 20px;
  height: 120px;
  background: #03a9f4;
  position: relative;
}

.cross::after {
  content: '';
  width: 120px;
  height: 20px;
  right: -50px;
  top: 50px;
  background: #03a9f4;
  position: absolute;
}

3.聊天框

原理：利用::after或者：：before；创造1个矩形（利用border-radius加点圆角）加一个三角形，进行位置偏移，即可得到。

.chatBox {
  width: 120px;
  height: 60px;
  background: #009688;
  position: relative;
  border-radius: 15px;
}

.chatBox:before {
  content: "";
  position: absolute;
  right: 100%;
  top: 16px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 26px solid #009688;
  border-bottom: 13px solid transparent;
}

较复杂的图形：太极

原理：利用多种属性以及多个<div>进行组合

其实，所有的圆形都可以先想像成方形处理，然后在利用一些变形，即可得到我们想要的形状了。例如，我们的太极想像成方形就是下面这个样子的

方形太极

这样看起来是不是容易分解多了。我们可以认为这是一个2色的方形，再加上2个有粗边的方形，这样我们就可以利用一个<div>，再加上::before和::after就可以得到我们需要的形状了；以下是实现代码

.taiChi {
 position: relative;
 width: 0;
 height: 200px;
 border-left: 100px solid #fff;
 border-right: 100px solid #000; //border-radius: 50%;
 box-shadow: 0 0 50px #fff;
 animation: rolling 5s linear 0s infinite;
}

.taiChi::before, .taiChi::after {
 content: '';
 display: block;
 position: absolute;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 left: -50px;
}

.taiChi::before {
 background: #fff;
 border: 40px solid black;
}

.taiChi::after {
 top: 100px;
 background: black;
 border: 40px solid #fff;
}

@keyframes rolling {
 from {
   transform: rotate(360deg);
 }
 to {
   transform: rotate(0deg);
 }

——远方不远