css 是一門很高深的學(xué)問，是前端頁面是否好看的支柱裕便。之前一直小看了css的力量绒净，最近看其他博主的書才明白自己的css是多么的菜，以為會點布局就是css了有點貽笑大方了偿衰。這篇博客利用css 實現(xiàn)各種形狀的編寫挂疆。
完整代碼 https://github.com/shenweizheng110/study/blob/master/demo/cssShape.html
css 要想實現(xiàn)三角形、梯形燈形狀下翎，主要利用 border 的相關(guān)特性缤言。那么首先看一下border屬性，我們給一個div設(shè)置很寬的border视事。
width: 40px;
height: 40px;
border-top: 50px solid red;
border-left: 50px solid black;
border-right: 50px solid yellow;
border-bottom: 50px solid blue;
效果為：
為了看起來清楚一點胆萧，我用了四種不同的顏色進行區(qū)分。那么我們設(shè)置 width 和 hight 都為 0 俐东，也就是content所占據(jù)的面積為0 那么在標準盒模型下跌穗，整個div所展示的面積就會由我們的border的寬度所占據(jù)，畢竟我們這里沒有margin 和 padding虏辫。
width: 40px;
height: 40px;
border-top: 50px solid red;
border-left: 50px solid black;
border-right: 50px solid yellow;
border-bottom: 50px solid blue;
如果我們只需要下面藍色的那個三角形蚌吸，只需要不設(shè)置 上邊框，然后左右兩個邊框的顏色為透明的就可以砌庄。當然也可以設(shè)置除了藍色的其余邊邊框的顏色為透明的也可以羹唠。
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: blue;
接下來我們看一下改變?nèi)切蔚淖冮L，大家都知道改變邊框的寬度用的是 border-width 屬性娄昆。我們可以逐漸的加大 border-bottom 試試
border-bottom 為 100 px 時：
可以看的出來時三角形的高變大了佩微，而不是三角形的底變大了。之前我也在懵逼為什么會是這樣的萌焰，結(jié)果我發(fā)現(xiàn)對 border-width 的了解出現(xiàn)了偏差哺眯。事實上，border-width 是這樣的：
圖中的這條白線才是 border-width扒俯。
那么同樣的奶卓，藍色三角形的邊長是 border-left-width 加上 border-right-width 的和，高度為 border-bottom-width陵珍。
直角三角形
上面說了三角形的邊和高的構(gòu)成寝杖，那么直角三角形就是將border-left 或者 border-right其中一個置為0；
width: 0;
height: 0;
border-left: 50px solid transparent;
border-bottom: 50px solid blue;
等邊三角形
等邊三角形的定義是三角形的三邊長相等互纯，高為邊的 , 那么高是由border-bottom-width控制的瑟幕，而變長是由 border-left-width 與 border-right-width 的和。那么如果我們的 border-left-width 和 border-right-width 都為 50px 的話，高就是
, 粗略的為 86px
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 86px solid blue;
梯形
直角梯形
只需要將上邊框取消只盹，左右選取一個將其顏色置為透明
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid yellow;
border-bottom: 50px solid blue;
普通梯形
普通梯形的上邊框需要使用width屬性指定辣往，要給他一定的寬度
width: 25px;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid blue;
菱形
這個就簡單了，只要將正方形旋轉(zhuǎn) 45 度殖卑。
width: 0;
height: 0;
border-top: 50px solid red;
border-left: 50px solid black;
border-right: 50px solid yellow;
border-bottom: 50px solid blue;
transform: rotate(45deg);
平行四邊形
借助 transform 中的 skew 屬性來實現(xiàn)站削，由于直接在div中使用，會導(dǎo)致內(nèi)部的字體也會相應(yīng)的傾斜孵稽，一種解決方案是對里面的文本加一個反向的傾斜许起，另一種解決方案是利用為元素進行傾斜，這樣內(nèi)部的文本就不會繼承傾斜了菩鲜。
.rhomboid{
width: 100px;
height: 100px;
position: relative;
}
.rhomboid::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: blue;
transform: skew(45deg);
}
愛心
愛心可以通過的其他元素進行遮掩拼接實現(xiàn)园细。首先畫一個正方形
.love{
width: 100px;
height: 100px;
background: red;
}
通過為元素畫兩個圓覆蓋在正方形上
.love::before{
content: '';
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: -50px;
border-radius: 50%;
background: yellow;
}
.love::after{
content: '';
width: 100px;
height: 100px;
position: absolute;
top: -50px;
left: 0;
border-radius: 50%;
background: yellow;
}
旋轉(zhuǎn) 45 度 顏色改成一致的
