用css控制一個DIV畫圖標。

時間 2019-12-05

標籤 css 控制一個 div 畫圖欄目 CSS 简体版

原文原文鏈接

在實際開發中，咱們會用到一些小圖形，圖標。大多數狀況下都是用圖片來實現的，同時對圖片進行處理使圖片大小盡量的縮小。可是圖片在怎麼處理也是按KB來算的。可是要是用CSS畫，只要用不多的空間就能完成一樣的效果了，並且還方便後期的維護。咱們今天畫四個圖形，一個三角形，一個直角三角形，兩種方法畫多邊框正方形，同心圓，分享圖標。css

三角形html

首先，咱們先畫一個三角形前端

代碼以下： 1 <div id="duo1"></div> 對就是用一個DIV來畫。前端工程師

咱們能夠把這幅圖補腦一下spa

這是否是就有點眼熟了呢？沒看出來不要緊，在看這張。code

左邊的你們應該很熟悉了，就是一個有邊框的盒子，而右邊的就是把盒子的寬度和高度設置爲0px。htm

而後咱們把邊框的左，上，右設置爲白色。代碼以下blog

 1 <head>
 2 <style>
 3 div[id="duo1"]{
 4 width:0px; height:0px; 
 5 border-top:50px solid white; 
 6 border-left:50px solid white; 
 7 border-bottom:50px solid #000; 
 8 border-right:50px solid white;}
 9 </style>
10 </head>
11 <body>
12 <div id="duo1"></div>
13 </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或者叫輪廓線屬性。

1 div[id="dcbk"]{
2 width:50px; height:50px; 
3 outline:10px solid blue;
4  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即左，下不偏移，而後再設置尺寸不就是至關於邊框了嗎？

1 div[id="dcbk2"]{ 
2 width:50px; height:50px;
3 border:10px solid yellow; 
4 box-shadow:0 0 0 10px blue;

效果是同樣的，並且跟着圓角變

同心圓

一個圓咱們會畫，兩個同心圓咱們也能夠，那麼三個四個五個呢？

怎麼作呢？要是能夠定義多個邊框不就行了嗎？在上面，咱們是用box-shadow來作邊框效果的

一樣，咱們仍是用box-shadow屬性。可是其實box-shadow能夠同時定義多個陰影的，寫法以下

1 div[id="yuan"]{ width:50px; height:50px;
2 border:10px solid yellow; 
3  border-radius:100px;
4 box-shadow:0 0 0 10px black,
5     0 0 0 20px blue,
6     0 0 0 30px red;}

中間用"，"隔開就行了，沒有數量限制。

分享圖標

最後咱們作一個分享的圖標

這個怎麼作呢？咱們能夠把他分開來看，能夠當作一個三角形，兩個邊框還有一個鷹嘴同樣的圖。

三角形和兩個邊框好作的，利用本文的第一部分講的就能做了。關鍵是鷹嘴怎麼作？

這樣補齊是否是就是一個左上角爲圓角的盒子了？

而後咱們再把左邊距的寬度縮小到0，是否是就是一個鷹嘴的圖形了？

下面是分享圖標的代碼：

 1 div[id="hez1"]{
 2 width:10px; height:30px;
 3 border-top:5px solid #000; 
 4 border-left:5px solid #000;
 5 border-right:5px solid white;
 6  position: absolute;}
 7 div[id="hez2"]{
 8 width:30px; height:5px;  border-top:5px solid white; 
 9 border-right:5px solid  #000;border-bottom:5px solid #000;
10 position: absolute;left:0px;top:15px;}
11 
12 div[id="yuanjiao"]{
13 width:20px; height:20px; 
14 border-radius:20px 0 0 0;
15 border-left:0px solid #000;
16 border-top:10px solid #000; 
17 position: absolute;
18 left:5px;top:-21px;
19 }
20  div[id="sanjiao"]{
21 width:0px; height:0px;
22 border-top:13px solid white; 
23 border-left:13px solid #000; 
24 border-bottom:13px solid white; 
25 border-right:0px solid white;
26 position: absolute;
27   left: 20px;
28   top: -18px;}
29 
30 <div id="hez1">
31 <div id="hez2">
32 <div id="yuanjiao">
33 <div id="sanjiao"></div>
34 </div></div></div>

等等！！！你覺得這樣就完了？太天真了！！！

把背景改成紅色看看!!!

這樣就會發現，以前無論是三角形仍是什麼咱們的邊框設置的都是白色，並且分享圖形放大了看會發現下面邊框的一角被三角形擋住了。

怎麼解決呢？很簡單。吧他透明就行了，

rgba(r,p,g,a);其中A是透明度的意思，A爲1 表明不透明，A爲0代碼100%透明。

rgba(255,255,255,0.0);如下是部分代碼。

1 div[id="sanjiao"]{width:0px; height:0px; 
2  border-top:13px solid rgba(255,255,255,0.0); 
3 border-left:13px solid #000; 
4 border-bottom:13px solid rgba(255,255,255,0.0); 
5 border-right:0px solid rgba(255,255,255,0.0);
6 position: absolute;
7   left: 20px;
8   top: -18px;}

你覺得這樣就完了嗎？不！還沒完。

作爲一個優秀的前端工程師，咱們要用最簡潔的代碼寫出最好的功能。

 1  div[id="one"]{width:10px; height:30px;  
 2 border-top:5px solid #000; 
 3 border-left:5px solid #000;
 4 border-right:5px solid rgba(255,255,255,0.0);
 5  position: absolute;}
 6 
 7  div[id="one"]:after{
 8 content:""; width:30px; height:5px; 
 9  border-top:5px solid rgba(255,255,255,0.0); 
10 border-right:5px solid  #000;
11 border-bottom:5px solid #000;
12 position: absolute;left:0px;top:15px;
13 }
14 
15 div[id="one"]:before{
16 content:""; width:20px; height:20px;
17  border-radius:20px 0 0 0; 
18 border-left:0px solid #000;
19 border-top:10px solid #000; 
20 position: absolute;
21 left:5px;top:-1px;
22 }
23 
24 div[id="sanjiao2"]{width:0px; height:0px; 
25 border-top:13px solid rgba(255,255,255,0.0); 
26 border-left:13px solid #000; 
27 border-bottom:13px solid rgba(255,255,255,0.0);
28  border-right:0px solid rgba(255,255,255,0.0);
29 position: absolute;
30   left: 25px;
31   top: -10px;}
32 
33 <div id="one"><div id="sanjiao2"></div></div>

咱們把上面的代碼簡化成只用兩個DIV就能作出相同的效果。

下面是所有代碼：

  1 <!DOCTYPE html>
  2 <HTML>
  3 <head>
  4 <style type="text/css">
  5 *{ margin:0px; padding:0px; border:0px; }
  6 body{ padding:20px;}
  7 div[id="duo1"]{width:0px; height:0px; border-top:50px solid rgba(255,255,255,0.0); 
  8             border-left:50px solid rgba(255,255,255,0.0); 
  9             border-bottom:50px solid #000; 
 10             border-right:50px solid rgba(255,255,255,0.0);}
 11             
 12 div[id="zjsjx"]{width:0px; height:0px; 
 13 border-top:50px solid rgba(255,255,255,0.0); 
 14 border-left:50px solid blue; 
 15 border-bottom:50px solid blue; 
 16 border-right:50px solid rgba(255,255,255,0.0);}
 17 
 18 div[id="dcbk"]{ width:50px; height:50px; outline:10px solid blue; border:10px solid yellow;}
 19 
 20 div[id="dcbk2"]{ width:50px; height:50px;
 21 border:10px solid yellow; 
 22 box-shadow:0 0 0 10px blue;}
 23 
 24 div[id="yuan"]{ width:50px; height:50px;
 25 border:10px solid yellow; margin:20px; 
 26 border-radius:100px;
 27 box-shadow:0 0 0 10px black,0 0 0 20px blue,
 28                             0 0 0 30px red;}
 29                             
 30   //分享圖標的css代碼
 31 div[id="hez1"]{width:10px; height:30px;  
 32 border-top:5px solid #000; 
 33 border-left:5px solid #000;
 34 border-right:5px solid rgba(255,255,255,0.0); 
 35 position: absolute;}
 36 
 37 div[id="hez2"]{width:30px; height:5px;  
 38 border-top:5px solid rgba(255,255,255,0.0); 
 39 border-right:5px solid  #000;
 40 border-bottom:5px solid #000;
 41 position: absolute;left:0px;top:15px;}
 42 
 43 div[id="yuanjiao"]{width:20px; height:10px; 
 44 border-radius:20px 0 0 0; 
 45 border-left:0px solid #000;
 46 border-top:10px solid #000; 
 47 position: absolute;
 48 left:5px;top:-21px;
 49 }
 50 
 51 div[id="sanjiao"]{width:0px; height:0px; 
 52  border-top:13px solid rgba(255,255,255,0.0); 
 53 border-left:13px solid #000; 
 54 border-bottom:13px solid rgba(255,255,255,0.0); 
 55 border-right:0px solid rgba(255,255,255,0.0);
 56 position: absolute;
 57   left: 20px;
 58   top: -18px;}
 59   
 60   
 61   
 62   //簡化後分享圖標的css代碼
 63  div[id="one"]{width:10px; height:30px;  
 64 border-top:5px solid #000; 
 65 border-left:5px solid #000;
 66 border-right:5px solid rgba(255,255,255,0.0);
 67  position: absolute;}
 68 
 69  div[id="one"]:after{
 70 content:""; width:30px; height:5px; 
 71  border-top:5px solid rgba(255,255,255,0.0); 
 72 border-right:5px solid  #000;
 73 border-bottom:5px solid #000;
 74 position: absolute;left:0px;top:15px;
 75 }
 76 
 77 div[id="one"]:before{
 78 content:""; width:20px; height:20px;
 79  border-radius:20px 0 0 0; 
 80 border-left:0px solid #000;
 81 border-top:10px solid #000; 
 82 position: absolute;
 83 left:5px;top:-1px;
 84 }
 85 
 86 div[id="sanjiao2"]{width:0px; height:0px; 
 87 border-top:13px solid rgba(255,255,255,0.0); 
 88 border-left:13px solid #000; 
 89 border-bottom:13px solid rgba(255,255,255,0.0);
 90  border-right:0px solid rgba(255,255,255,0.0);
 91 position: absolute;
 92   left: 25px;
 93   top: -10px;}
 94             
 95 </style>
 96 </head>
 97 <body>
 98 <div id="duo1"></div>
 99 <br>
100 <div id="zjsjx"></div>
101 <br>
102 <div id="dcbk"></div>
103 <br>
104 <div id="dcbk2"></div>
105 <br>
106 <div id="yuan"></div>
107 <br>
108 <!--
109 <div id="hez1">
110 <div id="hez2">
111 <div id="yuanjiao">
112 <div id="sanjiao"></div>
113 </div></div></div>
114 -->
115 
116   //簡化後分享圖標的HTML代碼
117 <div id="one"><div id="sanjiao2"></div></div>
118 </body>
119 </HTML>