大家好，我是IT修真院北京分院25期的學(xué)員，一枚正直純潔善良的web前端程序員
今天給大家分享一下，修真院官網(wǎng)css任務(wù)5，深度思考中的知識(shí)點(diǎn)——CSS可以繪制哪些常見(jiàn)的特殊形狀
1.背景介紹
在寫網(wǎng)頁(yè)的時(shí)候，會(huì)遇到需要裝飾一些幾何圖形的情況，用css就可以實(shí)現(xiàn)很多特殊形狀的繪制。它的特點(diǎn)是放大后圖像不會(huì)失真，文件的占用空間較小，也可以減少http的請(qǐng)求。
2.知識(shí)剖析
在css繪制圖形時(shí)，一般要使用到border-radius,transform（旋轉(zhuǎn):rotate,縮放:scale,傾斜:skew,移動(dòng):translate)等屬性來(lái)實(shí)現(xiàn)
border-radius的值可以設(shè)定為具體的長(zhǎng)度或者是百分比。當(dāng)border-radius的值為百分比時(shí)，相對(duì)的是包含邊框，padding后的尺寸。而不是單純地相對(duì)于width/height值。
旋轉(zhuǎn) rotate
用法：transform: rotate(45deg);
共一個(gè)參數(shù)“角度”，單位deg為度的意思，正數(shù)為順時(shí)針旋轉(zhuǎn)，負(fù)數(shù)為逆時(shí)針旋轉(zhuǎn)，上述代碼作用是順時(shí)針旋轉(zhuǎn)45度。
縮放 scale
用法：transform: scale(0.5) ?或者 ?transform: scale(0.5, 2);
參數(shù)表示縮放倍數(shù)；
一個(gè)參數(shù)時(shí)：表示水平和垂直同時(shí)縮放該倍率
兩個(gè)參數(shù)時(shí)：第一個(gè)參數(shù)指定水平方向的縮放倍率，第二個(gè)參數(shù)指定垂直方向的縮放倍率。
傾斜 skew
用法：transform: skew(30deg) ?或者 transform: skew(30deg, 30deg);
參數(shù)表示傾斜角度，單位deg
一個(gè)參數(shù)時(shí)：表示水平方向的傾斜角度；
兩個(gè)參數(shù)時(shí)：第一個(gè)參數(shù)表示水平方向的傾斜角度，第二個(gè)參數(shù)表示垂直方向的傾斜角度。
移動(dòng) translate
用法：transform: translate(45px) ?或者 transform: translate(45px, 150px);
參數(shù)表示移動(dòng)距離
本篇主要會(huì)用到skew和rotate
3.常見(jiàn)問(wèn)題
如何用CSS繪制圓形（橢圓形）/三角形(梯形)/平行四邊形
4.解決方案
5.編碼實(shí)戰(zhàn)
圓形/橢圓形
.circle{
width:10rem;
height:10rem;
border-radius:50%;
background:orange;
}
橢圓形只需改變矩形的邊長(zhǎng)
三角形/梯形
.triangle{
margin-top:5rem;
width:0;
border-bottom:5rem solid#00a000;
border-left:5rem solid transparent;
border-right:5rem solid transparent;
}
梯形只需設(shè)定width的值即可
平行四邊形
.parallelogram{
margin:5rem;
width:10rem;
height:5rem;
transform:skew(30deg);
background:orange;
}
6.擴(kuò)展思考
1.css繪制三角形的原理是什么
首先來(lái)看一下正常塊元素設(shè)置四條不同顏色邊框效果：為了效果明顯，所有邊框?qū)挾染鶠?0px；
上圖 html 和 css 代碼如下：
.test-border{
border-top:50px solid #ff0000;
border-bottom:50px solid #00a000;
border-left:50px solid #ff7f50;
border-right:50px solid #436eee;
}
當(dāng)我去掉內(nèi)容時(shí)
效果如下：
.test-border{
width:0;height:0;
border-top:50px solid #ff0000;
border-bottom:50px solid #00a000;
border-left:50px solid #ff7f50;
border-right:50px solid #436eee;
}
我相信，看到上面效果圖，距離實(shí)現(xiàn)三角形四個(gè)方向帶箭頭已經(jīng)不遠(yuǎn)了，
如果我們將上圖的下邊框顏色設(shè)置為透明，即?border-right: 50px solid transparent;
效果如下：
如果我們我們?nèi)サ?border-right ，效果相信大家都能猜到，CSS 和?如下圖所示：
.test-border{
width:0;
height:0;
border-top:50px solid #ff0000;
border-bottom:50px solid #00a000
;border-left:50px solid #ff7f50;
}
我們將上邊框和下邊框的顏色設(shè)置成透明
.test-border{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-left:50px solid #ff7f50;
}
便得到了一個(gè)左三角形
2.如何繪制一個(gè)簡(jiǎn)單的氣泡框
HTML部分
<div class="tip">
? ? ?<div class="tri">
? ? ?</div>
</div>
css部分:
.tip{
width:20rem;
height:4rem;
background:#b9e9f5;
position:relative;
margin-bottom:5rem;
}
.tri{
width:0;
height:0;
position:absolute;
top:4rem;
left:10%;
border-top:1.8rem solid#b9e9f5;
border-right:0.9rem solid transparent;
border-left:0.9rem solid transparent;
}
7.參考文獻(xiàn)
參考一：經(jīng)典CSS實(shí)現(xiàn)三角形圖標(biāo)原理解析
參考二：CSS3屬性transform詳解之（旋轉(zhuǎn):rotate,縮放:scale,傾斜:skew,移動(dòng):translate）
8.更多討論
用css繪圖五角星是如何做成的？
9.鳴謝
感謝大家觀看
BY : 周霆偉|馬靖哲
視頻鏈接:密碼: zvcu
技能樹(shù).IT修真院
“我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開(kāi)始，找個(gè)師兄，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷?！?。
這里是技能樹(shù).IT修真院，成千上萬(wàn)的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化，成長(zhǎng)可見(jiàn)化，師兄1對(duì)1免費(fèi)指導(dǎo)?？靵?lái)與我一起學(xué)習(xí)吧?！
