CSS可以繪製哪些常見的特殊形狀？
這裡是修真院前端小課堂，每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】
八個方面深度解析前端知識/技能，本篇分享的是：
【CSS可以繪製哪些常見的特殊形狀？ 】
大家好，我是IT修真院北京分院25期的學員，一枚正直純潔善良的web前端程式設計師
今天給大家分享一下，修真院官網css任務5，深度思考中的知識點——CSS可以繪製哪些常見的特殊形狀
1.背景介紹
在寫網頁的時候，會遇到需要裝飾一些幾何圖形的情況，用css就可以實現很多特殊形狀的繪製。它的特點是放大後圖像不會失真，檔案的佔用空間較小，也可以減少http的請求。
2.知識剖析
在css繪製圖形時，一般要使用到border-radius,transform（旋轉:rotate,縮放:scale,傾斜:skew,移動:translate)等屬性來實現
border-radius的值可以設定為具體的長度或者是百分比。當border-radius的值為百分比時，相對的是包含邊框，padding後的尺寸。而不是單純地相對於width/height值。
旋轉 rotate
用法：transform: rotate(45deg);
共一個引數“角度”，單位deg為度的意思，正數為順時針旋轉，負數為逆時針旋轉，上述程式碼作用是順時針旋轉45度。
縮放 scale
用法：transform: scale(0.5) 或者 transform: scale(0.5, 2);
引數表示縮放倍數；
一個引數時：表示水平和垂直同時縮放該倍率
兩個引數時：第一個引數指定水平方向的縮放倍率，第二個引數指定垂直方向的縮放倍率。
傾斜 skew
用法：transform: skew(30deg) 或者 transform: skew(30deg, 30deg);
引數表示傾斜角度，單位deg
一個引數時：表示水平方向的傾斜角度；
兩個引數時：第一個引數表示水平方向的傾斜角度，第二個引數表示垂直方向的傾斜角度。
移動 translate
用法：transform: translate(45px) 或者 transform: translate(45px, 150px);
引數表示移動距離
本篇主要會用到skew和rotate
3.常見問題
如何用CSS繪製圓形（橢圓形）/三角形(梯形)/平行四邊形
4.解決方案
5.編碼實戰
圓形/橢圓形
.circle{
width:10rem;
height:10rem;
border-radius:50%;
background:orange;
}
橢圓形只需改變矩形的邊長
三角形/梯形
.triangle{
margin-top:5rem;
width:0;
border-bottom:5rem solid#00a000;
border-left:5rem solid transparent;
border-right:5rem solid transparent;
}
梯形只需設定width的值即可
平行四邊形
.parallelogram{
margin:5rem;
width:10rem;
height:5rem;
transform:skew(30deg);
background:orange;
}
6.擴充套件思考
1.css繪製三角形的原理是什麼
首先來看一下正常塊元素設定四條不同顏色邊框效果：為了效果明顯，所有邊框寬度均為50px；
上圖 html 和 css 程式碼如下：
.test-border{
border-top:50px solid #ff0000;
border-bottom:50px solid #00a000;
border-left:50px solid #ff7f50;
border-right:50px solid #436eee;
}
當我去掉內容時
效果如下：
.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;
}
我相信，看到上面效果圖，距離實現三角形四個方向帶箭頭已經不遠了，
如果我們將上圖的下邊框顏色設定為透明，即 border-right: 50px solid transparent;
效果如下：
如果我們我們去掉 border-right ，效果相信大家都能猜到，CSS 和 如下圖所示：
.test-border{
width:0;
height:0;
border-top:50px solid #ff0000;
border-bottom:50px solid #00a000
;border-left:50px solid #ff7f50;
}
我們將上邊框和下邊框的顏色設定成透明
.test-border{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-left:50px solid #ff7f50;
}
便得到了一個左三角形
2.如何繪製一個簡單的氣泡框
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.參考文獻
參考一：經典CSS實現三角形圖示原理解析
參考二：CSS3屬性transform詳解之（旋轉:rotate,縮放:scale,傾斜:skew,移動:translate）
8.更多討論
用css繪圖五角星是如何做成的？
9.鳴謝
感謝大家觀看
BY : 周霆偉|馬靖哲
視訊連結:密碼: zvcu
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。
這裡是技能樹.IT修真院，成千上萬的師兄在這裡找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。快來與我一起學習吧 ！
作者：未成年麵包_d036
連結：https://www.jianshu.com/p/7cbf5f6e216a
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。
更多內容，可以加入IT交流群565734203與大家一起討論交流
這裡是技能樹·IT修真院：https://www.jnshu.com，初學者轉行到網際網路的聚集地