在實際開發中，我們會用到一些小圖形，圖標。大多數情況下都是用圖片來實現的，同時對圖片進行處理使圖片大小盡可能的縮小。但是圖片在怎麼處理也是按KB來算的。但是要是用CSS畫，只要用很少的空間就能完成同樣的效果了，而且還方便後期的維護。我們今天畫四個圖形，一個三角形，一個直角三角形，兩種方法畫多邊框正方形，同心圓，分享圖標。
三角形
首先，我們先畫一個三角形
代碼如下： <div id="duo1"></div> 對 就是用一個DIV來畫。
我們可以把這幅圖補腦一下
這是不是就有點眼熟了呢？沒看出來沒關系，在看這張。
左邊的大家應該很熟悉了，就是一個有邊框的盒子，而右邊的就是把盒子的寬度和高度設置為0px。
然後我們把邊框的左，上，右設置為白色。代碼如下
<head>
<style>
div[id="duo1"]{
width:0px; height:0px;
border-top:50px solid white;
border-left:50px solid white;
border-bottom:50px solid #000;
border-right:50px solid white;}
</style>
</head>
<body>
<div id="duo1"></div>
</body>
直角三角形
那麼直角三角形呢？其實方法是一樣的。顯示左下兩部分邊框，
//css樣式代碼
div[id="zjsjx"]{
width:0px; height:0px;
border-top:50px solid white;
border-left:50px solid blue;
border-bottom:50px solid blue;
border-right:50px solid white;}
//HTML代碼
<div id="zjsjx"></div>
正方形
那有兩個邊正方形怎麼用一個div畫呢？
這個時候就要用到一個屬性 描邊屬性outline或者叫輪廓線屬性。
div[id="dcbk"]{
width:50px; height:50px;
outline:10px solid blue;
border:10px solid yellow;}
但是，outline屬性有有關問題 比如要設置這個DIV為圓角，那麼這個屬性就會有問題，如圖：
可以看出 outline屬性不會隨著div的圓角變化而變化。那怎麼辦呢？別急 我們還有第二種方法來實現。
正方形方法二
第二種方法我們要用到一個屬性box-shadow屬性。
box-shadow語法：box-shadow: h-shadow v-shadow blur spread color inset;
即box-shadow: 水平陰影的位置（左偏移） 垂直陰影的位置（下偏移） 模糊距離（模糊度） 陰影的尺寸 顏色 將外部陰影 (outset) 改為內部陰影;
當然我們這裡不需要設置那麼多值。
如果水平陰影的位置 垂直陰影的位置都設置為O即左，下不偏移，然後再設置尺寸不就是相當於邊框了嗎？
div[id="dcbk2"]{
width:50px; height:50px;
border:10px solid yellow;
box-shadow:0 0 0 10px blue;
效果是一樣的，而且跟著圓角變
同心圓
一個圓我們會畫，兩個同心圓我們也可以，那麼三個四個五個呢？
怎麼做呢？要是可以定義多個邊框不就好了嗎？在上面，我們是用box-shadow來做邊框效果的
同樣，我們還是用box-shadow屬性。但是其實box-shadow可以同時定義多個陰影的，寫法如下
div[id="yuan"]{ width:50px; height:50px;
border:10px solid yellow;
border-radius:100px;
box-shadow:0 0 0 10px black,
0 0 0 20px blue,
0 0 0 30px red;}
中間用"，"隔開就好了，沒有數量限制。
分享圖標
最後我們做一個分享的圖標
這個怎麼做呢？我們可以把他分開來看，可以看成一個三角形，兩個邊框還有一個鷹嘴一樣的圖。
三角形和兩個邊框好做的，利用本文的第一部分講的就能作了。關鍵是鷹嘴怎麼做？
這樣補齊是不是就是一個左上角為圓角的盒子了？
然後我們再把左邊距的寬度縮小到0，是不是就是一個鷹嘴的圖形了？
下面是分享圖標的代碼：
div[id="hez1"]{
width:10px; height:30px;
border-top:5px solid #000;
border-left:5px solid #000;
border-right:5px solid white;
position: absolute;}
div[id="hez2"]{
width:30px; height:5px; border-top:5px solid white;
border-right:5px solid #000;border-bottom:5px solid #000;
position: absolute;left:0px;top:15px;}
div[id="yuanjiao"]{
width:20px; height:20px;
border-radius:20px 0 0 0;
border-left:0px solid #000;
border-top:10px solid #000;
position: absolute;
left:5px;top:-21px;
}
div[id="sanjiao"]{
width:0px; height:0px;
border-top:13px solid white;
border-left:13px solid #000;
border-bottom:13px solid white;
border-right:0px solid white;
position: absolute;
left: 20px;
top: -18px;}
<div id="hez1">
<div id="hez2">
<div id="yuanjiao">
<div id="sanjiao"></div>
</div></div></div>
等等！！！你以為這樣就完了？太天真了！！！
把背景改為紅色看看!!!
這樣就會發現，之前不管是三角形還是什麼我們的邊框設置的都是白色，而且分享圖形放大了看會發現下面邊框的一角被三角形擋住了。
怎麼解決呢？很簡單。吧他透明就好了，
rgba(r,p,g,a);其中A是透明度的意思，A為1 代表不透明，A為0代碼100%透明。
rgba(255,255,255,0.0);以下是部分代碼。
div[id="sanjiao"]{width:0px; height:0px;
border-top:13px solid rgba(255,255,255,0.0);
border-left:13px solid #000;
border-bottom:13px solid rgba(255,255,255,0.0);
border-right:0px solid rgba(255,255,255,0.0);
position: absolute;
left: 20px;
top: -18px;}
你以為這樣就完了嗎？不！還沒完。
做為一個優秀的前端工程師，我們要用最簡潔的代碼寫出最好的功能。
div[id="one"]{width:10px; height:30px;
border-top:5px solid #000;
border-left:5px solid #000;
border-right:5px solid rgba(255,255,255,0.0);
position: absolute;}
div[id="one"]:after{
content:""; width:30px; height:5px;
border-top:5px solid rgba(255,255,255,0.0);
border-right:5px solid #000;
border-bottom:5px solid #000;
position: absolute;left:0px;top:15px;
}
div[id="one"]:before{
content:""; width:20px; height:20px;
border-radius:20px 0 0 0;
border-left:0px solid #000;
border-top:10px solid #000;
position: absolute;
left:5px;top:-1px;
}
div[id="sanjiao2"]{width:0px; height:0px;
border-top:13px solid rgba(255,255,255,0.0);
border-left:13px solid #000;
border-bottom:13px solid rgba(255,255,255,0.0);
border-right:0px solid rgba(255,255,255,0.0);
position: absolute;
left: 25px;
top: -10px;}
<div id="one"><div id="sanjiao2"></div></div>
我們把上面的代碼簡化成只用兩個DIV就能做出相同的效果。
下面是全部代碼：
<!DOCTYPE html>
<HTML>
<head>
<style type="text/css">
*{ margin:0px; padding:0px; border:0px; }
body{ padding:20px;}
div[id="duo1"]{width:0px; height:0px; border-top:50px solid rgba(255,255,255,0.0);
border-left:50px solid rgba(255,255,255,0.0);
border-bottom:50px solid #000;
border-right:50px solid rgba(255,255,255,0.0);}
div[id="zjsjx"]{width:0px; height:0px;
border-top:50px solid rgba(255,255,255,0.0);
border-left:50px solid blue;
border-bottom:50px solid blue;
border-right:50px solid rgba(255,255,255,0.0);}
div[id="dcbk"]{ width:50px; height:50px; outline:10px solid blue; border:10px solid yellow;}
div[id="dcbk2"]{ width:50px; height:50px;
border:10px solid yellow;
box-shadow:0 0 0 10px blue;}
div[id="yuan"]{ width:50px; height:50px;
border:10px solid yellow; margin:20px;
border-radius:100px;
box-shadow:0 0 0 10px black,0 0 0 20px blue,
0 0 0 30px red;}
//分享圖標的css代碼
div[id="hez1"]{width:10px; height:30px;
border-top:5px solid #000;
border-left:5px solid #000;
border-right:5px solid rgba(255,255,255,0.0);
position: absolute;}
div[id="hez2"]{width:30px; height:5px;
border-top:5px solid rgba(255,255,255,0.0);
border-right:5px solid #000;
border-bottom:5px solid #000;
position: absolute;left:0px;top:15px;}
div[id="yuanjiao"]{width:20px; height:10px;
border-radius:20px 0 0 0;
border-left:0px solid #000;
border-top:10px solid #000;
position: absolute;
left:5px;top:-21px;
}
div[id="sanjiao"]{width:0px; height:0px;
border-top:13px solid rgba(255,255,255,0.0);
border-left:13px solid #000;
border-bottom:13px solid rgba(255,255,255,0.0);
border-right:0px solid rgba(255,255,255,0.0);
position: absolute;
left: 20px;
top: -18px;}
//簡化後分享圖標的css代碼
div[id="one"]{width:10px; height:30px;
border-top:5px solid #000;
border-left:5px solid #000;
border-right:5px solid rgba(255,255,255,0.0);
position: absolute;}
div[id="one"]:after{
content:""; width:30px; height:5px;
border-top:5px solid rgba(255,255,255,0.0);
border-right:5px solid #000;
border-bottom:5px solid #000;
position: absolute;left:0px;top:15px;
}
div[id="one"]:before{
content:""; width:20px; height:20px;
border-radius:20px 0 0 0;
border-left:0px solid #000;
border-top:10px solid #000;
position: absolute;
left:5px;top:-1px;
}
div[id="sanjiao2"]{width:0px; height:0px;
border-top:13px solid rgba(255,255,255,0.0);
border-left:13px solid #000;
border-bottom:13px solid rgba(255,255,255,0.0);
border-right:0px solid rgba(255,255,255,0.0);
position: absolute;
left: 25px;
top: -10px;}
</style>
</head>
<body>
<div id="duo1"></div>
<br>
<div id="zjsjx"></div>
<br>
<div id="dcbk"></div>
<br>
<div id="dcbk2"></div>
<br>
<div id="yuan"></div>
<br>
<!--
<div id="hez1">
<div id="hez2">
<div id="yuanjiao">
<div id="sanjiao"></div>
</div></div></div>
-->
//簡化後分享圖標的HTML代碼
<div id="one"><div id="sanjiao2"></div></div>
</body>
</HTML>
如果有什麼疑問或者建議或者漏洞及錯誤歡迎指正，與我聯系
==================================================================================================
本文為冷小包原創，轉載請注明出處及作者。謝謝合作
——冷小包著
- 上一頁:CSS3光標懸停寬度逐漸增加到指定值
- 下一頁:overflow 屬性