<div>是HTML里再普通不过的一个元素了，但是如果加上各种属性的配合，那么它将会发出奇效，创造出千变万化的形状。下面我们就来感受下<div>的魅力.注：以下所以样式均由一个
<div>完成效果图请点击
平平无奇的正方形与长方形
正方形与长方形没什么好介绍的，因为这个是本色演出。
1. 正方形
.square {
width: 100px;
height: 100px;
background: #795548;
}
- 长方形
.rectangle {
width: 200px;
height: 100px;
background: #ff5722;
}
各种圆
包括正圆，椭圆，扇形等
主要原理：利用border-radius属性
1. 正圆
原理：正方形的四个角圆润之后就是圆形了
.circle {
width: 200px;
height: 200px;
background: #ff9800;
border-radius: 50%;
}
- 椭圆
原理：正方形可以变成正圆，如果长宽不等的话，则圆会变扁，形成椭圆。
.oval {
width: 200px;
height: 100px;
background: #ffc107;
border-radius: 100px / 50px;
}
- 扇形
原理：扇形其实就是圆的一部分；先利用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%;
}
- 弯月
原理：也是圆的一部分；先得到一个无色的圆，利用box-shdow属性得到弯月形状；
.moon {
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 20px 20px 0 0 #2196f3;
}
一些简单直线型图形。三角形，梯形平行四边形
主要原理：利用方形<div>进行变形或者隐藏部分内容
- 三角形
原理：和扇形类似，其实三角形也是正方向或者长方形的四分之一，只要利用border四个边组成一个方形，然后再利用transparent隐藏其他三个边即可。
.triangle {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid #ffeb3b;
}
- 梯形
原理：三角形的逆向原理。区别是三角形是利用border得到方形；梯形是利用方形增加border,取一个边即可。
.trapezoid {
border-bottom: 100px solid #cddc39;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
-
平行四边形
原理：普通的
<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);
}
——远方不远
