<div>是HTML里再普通不過的一個元素了蜜葱，但是如果加上各種屬性的配合寺庄，那么它將會發(fā)出奇效祠够，創(chuàng)造出千變?nèi)f化的形狀压汪。下面我們就來感受下<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>進行變形或者隱藏部分內(nèi)容
- 三角形
原理：和扇形類似君丁，其實三角形也是正方向或者長方形的四分之一，只要利用border四個邊組成一個方形将宪，然后再利用transparent隱藏其他三個邊即可绘闷。
.triangle {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid #ffeb3b;
}
- 梯形
原理：三角形的逆向原理。區(qū)別是三角形是利用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值可以達(dá)到效果丑勤；
.parallelogram {
width: 150px;
height: 100px;
transform: skew(20deg);
background: #8bc34a;
}
組合圖形：如五邊形华嘹，十字架，聊天框等
原理：利用多個形狀進行組合得到的形狀法竞；
1.五邊形
原理：利用::after或者：：before耙厚；創(chuàng)造一個三角形加上梯形，（梯形的一邊與三角形的一邊相等）可以得到一個五邊形岔霸；
?
.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薛躬；創(chuàng)造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；創(chuàng)造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;
}
較復(fù)雜的圖形：太極
原理：利用多種屬性以及多個<div>進行組合
其實坑夯，所有的圓形都可以先想像成方形處理岖寞，然后在利用一些變形，即可得到我們想要的形狀了渊涝。例如慎璧，我們的太極想像成方形就是下面這個樣子的
方形太極
這樣看起來是不是容易分解多了床嫌。我們可以認(rèn)為這是一個2色的方形，再加上2個有粗邊的方形胸私，這樣我們就可以利用一個<div>厌处，再加上::before和::after就可以得到我們需要的形狀了；以下是實現(xiàn)代碼
.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);
}
——遠(yuǎn)方不遠(yuǎn)
