css巧妙利用盒子----畫圖(一)
阿新 • • 發佈:2018-12-27
每次寫部落格之前的隨言碎語: emm,利用css來進行繪製一些圖形。是無意中發現的一個小操作~然後就研究啦一下啦,然後現在把畫的圖貼上來,下次再更新一些,因為又發現了一些。hahhaha:)
一、 利用css畫圖主要思想
真正用來畫圖的屬性不多,主要是border的一些屬性,偽元素盒子的使用以及定位的使用。最最最最主要的是思想!!!!也就是怎麼去畫!!怎麼去量化一個圖片,只要化簡好圖片之後,一切都好說啦,接下去畫一個圖之前都簡單記錄一下思路~
二 、畫圖開始
- border屬性的引入
先從最簡單的屬性開始吧~
(1)在不設定width以及height的情況下,利用border來繪製一個正方形,這裡是因為border也是具有寬度的,寬高的數值分別是由左右與上下來控制的。具體程式碼如下:(只是用了一個簡單的div盒子來進行繪製)
寬=border-left+border+right;高=border-top+border+bottom;
.box {
width: 0;
height: 0;
border:100px solid #339933;
}
程式碼結果:
- 簡單三角形
先將四條邊的
顏色設定為不相同的,就知道三角形怎麼畫~
具體程式碼如下:
.box{ width: 0; height: 0; border-width:100px; border-style:solid; border-color:#ffcccc black #996699 #339933; }
程式碼結果:
看到這個是不是就會畫三角形勒,只要把其餘不想存在的顏色,設定為transparent屬性就可以啦
(3)倒三角形
可以根據(2)的方法來畫,也可以使用transform屬性來旋轉角度。程式碼與上相似,就不貼啦,貼圖就好啦~
(4)圓弧繪製
圓弧的繪製與三角形的繪製十分相似,只需要使用border-radius就可以了。因為就是弧度啊~
具體程式碼:
.radiu { width: 0; height: 0; border-left:50px solid transparent; border-right:50px solid transparent; border-top:50px solid red; border-radius:50%; }
程式碼結果:
(5)梯形繪製
梯形的繪製,主要是知道,邊框與邊框之間的結合處是一個角平分線,也就是會形成一個三角形。就可以理解啦。也就是把左右兩邊的顏色設定為透明度,然後由寬度撐開,如果沒有寬度,就是一個三角形的形狀。
具體程式碼:
.ti{
width: 50px;
/* 有寬度就撐開 否則就兩條邊相連 */
height: 0;
/* div是塊級元素 否則預設螢幕寬度 */
border-right:50px solid transparent;
border-left:50px solid transparent;
/* 兩線交接處是一個角平分線 也就是三角形 */
border-bottom:50px solid red;
}
程式碼結果:
(6)五邊形:
五邊形,其實就是一個梯形與三角形的拼接,並且利用到偽元素,這樣就不需要額外新增盒子了。便於理解,於是用了兩個隨便的顏色。
具體程式碼:
.up {
position:relative;
width: 100px;
/*height: 10px;*/
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:110px solid #996699;
margin:100px auto;
transform: rotate(180deg);
}
.up::before{
content:'';
position:absolute;
top:110px;
left:-50px;
/*width:100px;*/
/*height:100px;*/
border-left:100px solid transparent;
border-right:100px solid transparent;
border-bottom:100px solid transparent;
border-top:60px solid pink;
/*background-color: pink;*/
/*可以簡寫
border-color:one two three four ; 與順時針一樣的四個值 對應位置 三個引數也一樣
*/
}
程式碼結果:
(7)箭頭的繪製
箭頭的繪製,就是利用兩個偽元素after和before,兩個進行疊加顯示。相互錯開一個單位。
具體程式碼:
.left{
position:absolute;
top:50px;
}
.left::before,.left::after{
/* 注意留下的是哪個邊框 然後進行定位移動 */
position:absolute;
content:'';
border-top:10px transparent dashed;
border-left:10px transparent dashed;
border-bottom:10px transparent dashed;
border-right:10px #fff dashed;
}
.left::before{
border-right:10px #0099cc solid ;
}
.left::after{
border-right:10px #fff solid;
/* 移動覆蓋 */
left:1px;
}
程式碼結果:
emmm,還有二,來不及,明天更~