CSS圖形基礎：純CSS繪製圖形
爲了在頁面中利用CSS3繪製圖形，在頁面中定義css
<div class="container">html
<div class="shape"></div>flex
</div> spa
其中，container做爲顯示圖形的畫布（容器），shape描述所繪製的圖形。ssr
定義.container的樣式規則以下：3d
.containerorm
{htm
margin: 0 auto;對象
width: 300px;blog
height:300px;
position: relative;
display:flex;
justify-content:center;
align-items:center;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
對shape設置不一樣的樣式規則，能夠繪製不一樣的圖形。
1．利用邊框屬性border繪製基本圖形
在CSS中，能夠用width和height屬性設置一個元素的寬度和高度，background屬性設置元素的背景色。例如，設置.shape的樣式規則以下：
.shape
{
position: absolute;
height:200px;
width:200px;
background:#ff8c00;
}
則能夠在頁面中繪製如圖1所示的用深橙色填充的邊長爲200px的正方形。
圖1 用深橙色填充的正方形
圖1中，外面的紅色圓角方框由.container樣式決定，裏面的用深橙色填充的邊長爲200px的正方形由.shape樣式決定。完整的HTML文件內容以下。
<!DOCTYPE html>
<html>
<head>
<title>CSS圖形繪製</title>
<style>
.container
{
margin: 0 auto;
width: 300px;
height:300px;
position: relative;
display:flex;
justify-content:center;
align-items:center;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.shape
{
position: absolute;
height:200px;
width:200px;
background:#ff8c00;
}
</style>
</head>
<body>
<div class="container">
<div class="shape"></div>
</div>
</body>
</html>
下面各圖形繪製時，除了特別說明，咱們只給出圖形所對應.shape樣式的定義，其他部分保持不變。這樣修改.shape樣式，能夠繪製不一樣的圖形。
例如，要繪製一個邊長爲200px的正方形（只有外框線，沒有內部填充），能夠修改.shape以下：
.shape
{
position: absolute;
height:200px;
width:200px;
border:4px solid #ff8c00;
}
此時頁面顯示如圖2所示，「畫布」中顯示的圖形爲一個邊長爲200px的正方形。其中，用到了border屬性進行邊框樣式的設置。
圖2 正方形
border屬性是一個縮寫的邊框屬性，用於設置元素全部的邊框屬性。能夠設置的屬性分別（按順序）爲：border-width（邊框寬度）、border-style（邊框樣式）和border-color（邊框顏色）。
本文中會用到包括border在內的許多CSS屬性，這些屬性的格式和功能咱們不一一介紹，只是拿過來應用。須要瞭解這些屬性功能和使用方法的讀者能夠參看《CSS參考手冊》（https://www.w3cschool.cn/cssref/3ps212do.html）。
（1）三角形。
修改.shape以下：
.shape
{
position: absolute;
height:50px;
width:50px;
border-top: 100px solid orange;
border-left: 100px solid blue;
border-right: 100px solid green;
border-bottom: 100px solid red;
}
可在頁面中看到如圖3所示的圖形。
圖3 四個梯形圍成正方形
在圖3中，橙色梯形塊表明是上邊框寬度，藍色梯形塊表明左邊框寬度，紅色梯形塊表明下邊框寬度，綠色梯形塊表明右邊框寬度，對幾個邊距的寬度而言，它們之間的分界剛好是這個正方形的對角線所在的直線，若是裏面的小正方形寬高無窮小（將shape樣式定義中width和height的屬性值均設爲0），那麼這個圖形將是一個由四塊不一樣顏色三角形拼接而成的圖形，如圖4所示。
圖4 四個三角形拼成正方形
修改.shape以下：
.shape
{
position: absolute;
height:0px;
width:0px;
border-left: 100px solid blue;
border-right: 100px solid green;
border-bottom: 200px solid red;
}
可在頁面中看到如圖5所示的圖形。
圖5 三個三角形拼成一個正方形
修改上面樣式中左、右或下邊框的填充色爲背景色或transparent，至關於切掉了該邊框，這樣能夠組合爲不一樣的三角形。
例如，修改.shape樣式定義爲：
.shape
{
position: absolute;
height:0px;
width:0px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid red;
}
可在頁面中看到如圖6所示的等腰三角形。
圖6 等腰三角形
又如，修改.shape樣式定義爲：
.shape
{
position: absolute;
height:0px;
width:0px;
border-left: 100px solid blue;
border-bottom: 200px solid transparent;
}
可在頁面中看到如圖7所示的直角三角形。
圖7 直角三角形
再如，修改.shape樣式定義爲：
.shape
{
position: absolute;
height:0px;
width:0px;
border-right: 100px solid green;
border-bottom: 100px solid transparent;
}
可在頁面中看到如圖8所示的等腰直角三角形。
圖8 等腰直角三角形
（2）平行四邊形和梯形。
將一個矩形框進行傾斜，能夠獲得平行四邊形。修改.shape樣式定義爲：
.shape
{
position: absolute;
height:100px;
width:200px;
background:#ff8c00;
transform: skew(20deg);
}
可在頁面中看到如圖9所示的平行四邊形。
圖9 平行四邊形
修改.shape樣式定義爲：
.shape
{
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid #ff8c00;
position: relative;
top:-50px;
}
.shape:after
{
content: '';
position: absolute;
top: 70px;
left:-50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid #ff8c00;
}
可在頁面中看到如圖10所示的菱形。
圖10 菱形
修改.shape樣式定義爲：
.shape
{
position: absolute;
width:100px;
border-bottom: 150px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
可在頁面中看到如圖11所示的梯形。
圖11 梯形
（3）圓、圓環和橢圓。
利用border-radius屬性能夠爲元素設置圓角邊框，這樣能夠繪製各類圓形。
修改.shape樣式定義爲：
.shape
{
position: absolute;
width:150px;
height:150px;
background:#8A2BE2;
border-radius:50%;
}
可在頁面中看到如圖12所示的圓形。
圖12 圓
將上面繪製圓的樣式中的「height:150px;」改爲「height:50px;」，其他保持不變，則獲得如圖13所示的橢圓。
圖13 橢圓
將兩個橢圓旋轉後交叉在一塊兒，能夠構成一個紅叉叉。修改.shape樣式定義爲：
.shape
{
position: relative;
width: 160px;
height: 24px;
background-color: #f00;
transform: rotate(45deg);
border-radius: 50%;
}
.shape:after
{
content: "";
position: absolute;
width: 160px;
height: 24px;
background-color: #f00;
transform: rotate(90deg);
border-radius: 50%;
}
可在頁面中看到如圖14所示的紅叉叉。
圖14 紅叉叉
修改.shape樣式定義爲：
.shape
{
width: 100px;
height: 50px;
background: #8A2BE2;
border-radius: 100px 100px 0 0;
}
可在頁面中看到如圖15所示的半圓。
圖15 半圓
修改.shape樣式定義爲：
.shape
{
width: 100px;
height: 100px;
background: #8A2BE2;
border-radius: 100px 0 0 0;
}
可在頁面中看到如圖16所示的四分之一圓（扇形）。
圖16 扇形
修改.shape樣式定義爲：
.shape
{
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid red;
border-left: 60px solid red;
border-bottom: 60px solid red;
border-radius: 50%;
}
可在頁面中看到如圖17所示的圖形，這個圖形是遊戲中的「食人豆」。
圖17 「食人豆」
修改.shape樣式定義爲：
.shape
{
width: 126px;
height: 180px;
background-color:#FFEFD5;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
可在頁面中看到如圖18所示的雞蛋。
圖18 雞蛋
修改.shape樣式定義爲：
.shape
{
width: 100px;
height: 100px;
border: 15px solid red;
position: relative;
border-radius: 50%;
}
可在頁面中看到如圖19所示的圓環。
圖19 圓環
爲一個圓環加上一個傾斜的手柄，能夠繪製出一個放大鏡。修改.shape樣式定義爲：
.shape
{
width: 64px;
height: 64px;
border: 10px solid black;
position: relative;
border-radius: 50%;
}
.shape:before
{
content: "";
position: absolute;
right: -40px;
bottom: -16px;
border-width: 0;
background: black;
width: 56px;
height: 10px;
transform: rotate(45deg);
}
可在頁面中看到如圖20所示的放大鏡。
圖20 放大鏡
修改.shape樣式定義爲：
.shape
{
width: 100px;
height: 100px;
border: 15px solid white;
position: relative;
border-radius: 50%;
border-top: 15px solid red;
border-left: 15px solid orange;
border-bottom: 15px solid green;
border-right: 15px solid blue;
}
可在頁面中看到如圖21四色圓環。
圖21 四色圓環
修改.shape樣式定義爲：
.shape
{
width: 120px;
height: 120px;
border-left: 60px solid green;
border-right: 60px solid blue;
border-top: 60px solid red;
border-radius: 50%;
}
可在頁面中看到如圖22所示的不規則圓環。
圖22 不規則圓環
若保留圖22中的紅色，將另外兩種顏色設爲transparent，可在頁面中看到如圖23所示的扇面。若只保留藍色，則可在頁面中看到如圖24所示的牛角。
圖23 扇面
圖24 牛角
修改.shape樣式定義爲：
.shape
{
width: 0px;
height: 0px;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 120px solid red;
border-radius: 50%;
}
可在頁面中看到如圖25所示的圓錐形。
圖 25 圓錐形
（4）多邊形。
修改.shape樣式定義爲：
.shape
{
position: relative;
width: 54px;
border-top: 50px solid red;
border-left: 18px solid transparent;
border-right: 18px solid transparent;
}
.shape:before
{
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-bottom: 35px solid red;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
}
可在頁面中看到如圖26所示的五邊形。這個五邊形由兩個基本圖形拼合而成：一個是下面部分使用.shape定義的梯形，另外一個是上面部分使用.shape:before定義的上三角形。三角形和梯形層疊到一塊兒，從而造成五邊形。
圖26 五邊形
修改.shape樣式定義爲：
.shape
{
width: 138.5px;
height: 80px;
background: red;
position: relative;
}
.shape:before
{
content: "";
position: absolute;
top: -40px;
left: 0;
width: 0;
height: 0;
border-left: 69.25px solid transparent;
border-right: 69.25px solid transparent;
border-bottom: 40px solid red;
}
.shape:after
{
content: "";
position: absolute;
bottom: -40px;
left: 0;
width: 0;
height: 0;
border-left: 69.25px solid transparent;
border-right: 69.25px solid transparent;
border-top: 40px solid red;
}
可在頁面中看到如圖27所示的六邊形。這個六邊形由三個基本圖形拼合而成：一個是中間部分使用.shape定義的矩形，另外一個是上面部分使用.shape:before定義的上三角形，還有一個是下面部分使用.shape:after定義的下三角形。三個基本圖形層疊到一塊兒，從而造成六邊形。而且圖中的六邊形仍是一個正六邊形。
圖27 六邊形
修改.shape樣式定義爲：
.shape
{
width: 120px;
height: 50px;
background: red;
position: relative;
}
.shape:before
{
content: "";
position: absolute;
top: -35px;
left: 0;
border-bottom: 35px solid red;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
width: 50px;
height: 0;
}
.shape:after
{
content: "";
position: absolute;
top: 50px;
left: 0;
border-top: 35px solid red;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
width: 50px;
height: 0;
}
可在頁面中看到如圖28所示的八邊形。這個八邊形由三個基本圖形拼合而成：一個是中間部分使用.shape定義的矩形，另外一個是上面部分使用.shape:before定義的底邊大於頂邊的梯形，還有一個是下面部分使用.shape:after定義的底邊小於頂邊的梯形。三個基本圖形層疊到一塊兒，從而造成八邊形。而且圖中的八邊形仍是一個近似正八邊形。
圖28 八邊形
（5）多角星。
修改.shape樣式定義爲：
.shape
{
position: relative;
display: block;
width:0px;
height:0px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom:70px solid red;
transform:rotate(35deg);
}
.shape:before
{
content: '';
position: absolute;
width: 0px;
height: 0px;
top: -45px;
left: -62.5px;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 80px solid green;
transform: rotate(-35deg);
}
.shape:after
{
content: '';
position: absolute;
width: 0px;
height: 0px;
top: 3px;
left: -105px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 70px solid blue;
transform:rotate(-70deg);
}
可在頁面中顯示如圖29所示的五角星。這個五角星是由三個三角形拼成的，因爲文字描述不能精確，爲了方便理解，將三個三角形設置成不一樣的顏色。
圖29 五角星
修改.shape樣式定義爲：
.shape
{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
.shape:after
{
content: "";
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
top: 30px;
left: -50px;
}
可在頁面中看到如圖30所示的六角星。這個六角星是由兩個三角形拼合而成的，一個三角形是使用.shape定義的上三角形，另外一個是使用.shape:after定義的下三角形。它們層疊到一塊兒，從而造成六角星。
圖30 六角星
修改.shape樣式定義爲：
.shape
{
background: red;
width: 150px;
height: 150px;
position: relative;
}
.shape:after
{
content: "";
position: absolute;
top: 0;
left: 0;
height: 150px;
width: 150px;
background: red;
transform: rotate(45deg);
}
可在頁面中看到如圖31所示的八角星。這個八角星由兩個正方形拼合而成：一個正方形是使用.shape定義的，另外一個是使用.shape:after定義的，它旋轉了45°。兩個正方形層疊到一塊兒，從而造成八角星。
圖31 八角星
修改.shape樣式定義爲：
.shape
{
background: red;
width: 150px;
height: 150px;
position: relative;
}
.shape:before, .shape:after
{
content: "";
position: absolute;
top: 0;
left: 0;
height: 150px;
width: 150px;
background: red;
}
.shape:before
{
transform: rotate(30deg);
}
.shape:after
{
transform: rotate(60deg);
}
可在頁面中看到如圖32所示的十二角星。這個十二角星由三個正方形拼合而成：一個正方形是使用.shape定義的，另外一個是使用.shape:before定義的，它旋轉了30°，還有一個是使用.shape:after定義的，它 旋轉了60°。三個正方形層疊到一塊兒，從而造成十二角星。
圖32 十二角星
（6）其餘組合圖形。
修改.shape樣式定義爲：
.shape
{
position: relative;
width: 20px;
height: 100px;
background: red;
}
.shape:after
{
content: "";
position: absolute;
left: -40px;
top: 40px;
width: 100px;
height: 20px;
background: red;
}
可在頁面中看到如圖33所示的紅十字。
圖33 紅十字
修改.shape樣式定義爲：
.shape
{
position: relative;
width: 100px;
height: 90px;
}
.shape:before, .shape:after
{
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.shape:after
{
left: 0;
transform: rotate(45deg);
transform-origin :100% 100%;
}
可在頁面中看到如圖34所示的心形。
圖34 心形
修改.shape樣式定義爲：
.shape
{
border-style: solid;
border-color: transparent transparent #FFFAFA transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
}
.shape:after
{
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: #FFFAFA transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
可在頁面中看到如圖35所示的鑽石。
圖35 鑽石
修改.shape樣式定義爲：
.shape
{
position: relative;
width: 212px;
height: 100px;
}
.shape:before, .shape:after
{
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid red;
border-radius: 50px 50px 0 50px;
transform: rotate(-45deg);
}
.shape:after
{
left: auto;
right: 0;
border-radius: 50px 50px 50px 0;
transform: rotate(45deg);
}
可在頁面中看到如圖36所示的無窮大符號。
圖36 無窮大
修改.shape樣式定義爲：
.shape
{
position: relative;
width:80px;
height:80px;
border: 15px solid transparent;
border-top-color: red;
border-bottom-color: red;
border-radius: 50%;
}
.shape:before, .shape:after
{
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
border: 15px solid transparent;
border-bottom-color: red;
}
.shape:before
{
transform: rotate(135deg);
right: -15px;
top: -2.5px;
}
.shape:after
{
transform: rotate(-45deg);
left: -15px;
bottom: -2.5px;
}
可在頁面中看到如圖37所示的圓弧箭頭。
圖37 圓弧箭頭
2．利用box-shadow繪製圖形
在CSS中，屬性box-shadow用於給對象實現圖層陰影效果。利用box-shadow屬性也能夠繪製圖形。
box-shadow的基本格式爲：
box-shadow: h-shadow v-shadow blur spread color inset;
各參數的含義說明以下：
h-shadow必須設置，它表示陰影的水平偏移量，其值能夠取正負值，若是值爲正值，則陰影在對象的右邊；若值爲負值時，陰影在對象的左邊。
v-shadow也必須設置，它表示陰影的垂直偏移量，其值也能夠是正負值，若是爲正值，陰影在對象的底部；其值爲負值時，陰影在對象的頂部。
blur可選，表示陰影模糊半徑，其值只能是爲正值，若是值爲0時，表示陰影不具備模糊效果，其值越大陰影的邊緣就越模糊。
Spread可選，表示陰影擴展半徑，其值能夠是正負值，若是值爲正，則整個陰影都延展擴大；若值爲負值時，則縮小。
Color可選，表示陰影顏色。
Inset可選，表示陰影類型。其默認的投影方式是外陰影；若是取其惟一值「inset」，就是將外陰影變成內陰影。
另外，box-shadow可使用一個或多個投影，若是使用多個投影時，必須用逗號「，」分開。
例如，若定義.shape樣式規則以下：
.shape
{
width: 80px;
height: 60px;
background: #ff008c;
border: 6px solid blue;
box-shadow: 40px 30px green;
}
則在頁面中顯示如圖38所示的圖形。
圖38 綠色投影（outset）
若在box-shadow定義中加上inset，則顯示的圖形如圖39所示。
圖39 綠色投影（inset）
由此可知，對象陰影同box模型的層次同樣，外陰影會在對象背景之下，內陰影會在邊框之下背景之上。因此整個層級就是：邊框>內陰影>背景圖片>背景顏色>外陰影。
利用box-shadow屬性，咱們能夠在頁面中繪製圖形。
例如，修改.shape樣式定義爲：
.shape
{
width: 0;
color: #f00;
border: 15px solid transparent;
border-top: 25px solid;
box-shadow: 0 -32px 0 -6px;
}
可在頁面中顯示如圖40所示的下載箭頭。
圖40 下載箭頭
通常而言，一個div之類的元素經過設置border屬性能夠繪製一個基本圖形，加上:before和:after兩個僞類，最多可進行三個基本圖形組合。若須要更多圖形組合，border屬性就有點無能爲力了，增長div的定義個數是一種辦法。有時，經過box-shadow屬性設置多個投影來解決，可能更方便。這也是box-shadow屬性的一大優點。
例如，修改.shape樣式定義爲：
.shape
{
width: 40px;
height: 0;
color: red;
box-shadow: 20px 20px 0 4px ,20px 0 0 4px ,20px 40px 0 4px;
}
可在頁面中顯示如圖41所示的圖形。
圖41 三道槓
再修改.shape樣式定義爲：
.shape
{
width: 40px;
height: 0;
color: red;
box-shadow: 20px 20px 0 3px ,20px 0 0 3px ,20px 40px 0 3px,
20px 10px 0 3px ,20px 30px 0 3px;
}
可在頁面中顯示如圖42所示的五道槓。
圖42 五道槓
修改.shape樣式定義爲：
.shape
{
position: relative;
width:80px;
height:80px;
box-shadow:-30px 0px 0px red,0px -30px 0px yellow,
30px 0px 0px green,0px 30px 0px blue;
}
可在頁面中顯示如圖43所示的圖形。
圖43 四色方框
修改.shape樣式定義爲：
.shape
{
position: relative;
width: 40px;
height: 40px;
background-color: black;
border-radius: 50%;
box-shadow: 0 0 0 15px #fff,0 0 0 25px #000;
}
可在頁面中顯示如圖44所示的單選按鈕。
圖44 單選按鈕
修改.shape樣式定義爲：
.shape
{
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 15px 15px 0 0 white;
}
可在頁面中看到如圖45所示的彎月。
圖45 彎彎的月亮
修改.shape樣式定義爲：
.shape
{
width: 40px;
height: 40px;
background: #fff;
border-radius: 50%;
box-shadow: #fff 22px -15px 0 6px, #fff 57px -6px 0 2px, #fff 87px 4px 0 -4px,
#fff 33px 6px 0 6px, #fff 61px 6px 0 2px, #ccc 29px -23px 0 6px,
#ccc 64px -14px 0 2px, #ccc 94px -4px 0 -4px;
}
可在頁面中看到如圖46所示的雲朵。
圖46 雲朵
修改.shape樣式定義爲：
.shape
{
width:160px;
height:160px;
border-radius: 50%;
box-shadow: inset 0 0 0 16px #fff,
-80px -80px 0 -64px #f00,
0 -112px 0 -64px #f0f,
80px -80px 0 -64px #ff0,
-80px 80px 0 -64px #0f0,
0 112px 0 -64px #0ff,
80px 80px 0 -64px #00f,
-112px 0 0 -64px #808,
112px 0 0 -64px #000;
}
可在頁面中看到如圖47所示的圖形，在一個圓環的周圍圍了8個小圓。
圖47 圓環周圍的小圓
- 1. 純 Css 繪製扇形
- 2. 用css繪製圖形
- 3. CSS圖形繪製總結
- 4. css繪製特殊圖形
- 5. 使用css繪製圖形
- 6. CSS：純CSS繪製三角形（原理）
- 7. Shader 繪製基礎圖形
- 8. ThreeJs 圖形繪製基礎
- 9. CSS製做圖形
- 10. 用CSS代碼繪製三角形 純CSS繪製三角形的代碼
- 更多相關文章...
- • R 繪圖 - 條形圖 - R 語言教程
- • R 繪圖 - 餅圖 - R 語言教程
- • 漫談MySQL的鎖機制
- • Kotlin學習（二）基本類型
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 純 Css 繪製扇形
- 2. 用css繪製圖形
- 3. CSS圖形繪製總結
- 4. css繪製特殊圖形
- 5. 使用css繪製圖形
- 6. CSS：純CSS繪製三角形（原理）
- 7. Shader 繪製基礎圖形
- 8. ThreeJs 圖形繪製基礎
- 9. CSS製做圖形
- 10. 用CSS代碼繪製三角形 純CSS繪製三角形的代碼