CSS實現各種形狀

CSS3的一個非常酷的特性是允許我們創建各種規則和不規則形狀的圖形，從而可以減少圖片的使用。以前只能在Photoshop等圖像編輯軟件中制作的復雜圖形現在使用CSS3就可以完成了。通過使用新的CSS屬性，像transform和border-radius，我們可以創建非常漂亮和復雜的圖形效果。

 圓形

 

要使用CSS來制作一個圓形，我們需要一個div，被給它設置一個ID。

< div id = "circle" ></ div >                             

圓形在設置CSS時要設置寬度和高度相等，然后設置border-radius屬性為寬度或高度的一半即可：

# circle {

     width : 120px ;

     height : 120px ;

     background : #7fee1d ;

     -moz- border-radius : 60px ;

     -webkit- border-radius : 60px ;

     border-radius : 60px ;

}                             

 正方形

 

正方形是CSS圖形中最簡單的圖形之一，同樣使用一個div，並設置一個ID。

< div id = "square" ></ div >                             

正方形的CSS樣式只需要設置相同的寬度和高度即可。

# square {

     width : 120px ;

     height : 120px ;

     background : #f447ff ;

}                             

 長方形

 

與正方形一樣，CSS長方形也非常簡單：

< div id = "rectangle" ></ div >                             

與正方形不同的是，長方形的長度和高度為不同的值。

#rectangle {

     width : 220px ;

     height : 120px ;

     background : #4da1f7 ;

}                             

 橢圓形

 

橢圓形是正圓形的一個變體，同樣使用一個帶ID的div來制作。

< div id = "oval" ></ div >                             

設置橢圓形的CSS時，高度要設置為寬度的一半，border-radius屬性也要做相應的改變：

#oval {

     width : 200px ;

     height : 100px ;

     background : #e9337c ;

     -webkit- border-radius : 100px / 50px ;

     -moz- border-radius : 100px / 50px ;

     border-radius : 100px / 50px ;

}                            

 三角形

 

要創建一個CSS三角形，需要使用border，通過設置不同邊的透明效果，我們可以制作出三角形的現狀。另外，在制作三角形時，寬度和高度要設置為0。

< div id = "triangle" ></ div >                             

#triangle {

     width : 0 ;

     height : 0 ;

     border-bottom : 140px solid #fcf921 ;

     border-left : 70px solid transparent ;

     border-right : 70px solid transparent ;

}                             

 倒三角形

 

與正三角形不同的是，倒三角形要設置的是border-top、border-left和border-right三條邊的屬性：

#triangle {

     width : 0 ;

     height : 0 ;

     border-top : 140px solid #20a3bf ;

     border-left : 70px solid transparent ;

     border-right : 70px solid transparent ;

}                             

 左三角形

 

左三角形操作的是border-top、border-left和border-right三條邊的屬性，其中上邊和下邊要設置透明屬性。

#triangle_left {

     width : 0 ;

     height : 0 ;

     border-top : 70px solid transparent ;

     border-right : 140px solid #6bbf20 ;

     border-bottom : 70px solid transparent ;

}                            

 右三角形

 

右三角形操作的是border-bottom、border-left和border-right三條邊的屬性，其中上邊和下邊要設置透明屬性。

#triangle_right {

     width : 0 ;

     height : 0 ;

     border-top : 70px solid transparent ;

     border-left : 140px solid #ff5a00 ;

     border-bottom : 70px solid transparent ;

}                             

 菱形

 

制作菱形的方法有很多種。這里使用的是transform屬性和rotate相結合，使兩個正反三角形上下顯示。

#diamond {

     width : 120px ;

     height : 120px ;

     background : #1eff00 ;

/* Rotate */

     -webkit- transform : rotate ( -45 deg);

     -moz- transform : rotate ( -45 deg);

     -ms- transform : rotate ( -45 deg);

     -o- transform : rotate ( -45 deg);

     transform : rotate ( -45 deg);

/* Rotate Origin */

     -webkit- transform-origin : 0 100% ;

     -moz- transform-origin : 0 100% ;

     -ms- transform-origin : 0 100% ;

     -o- transform-origin : 0 100% ;

     transform-origin : 0 100% ;

     margin : 60px 0 10px 310px ;

}                             

 梯形

 

梯形是三角形的一個變體，設置CSS梯形時，左右兩條邊設置為相等，並且給它設置一個寬度。

#trapezium {

     height : 0 ;

     width : 120px ;

     border-bottom : 120px solid #ec3504 ;

     border-left : 60px solid transparent ;

     border-right : 60px solid transparent ;

}                             

 平行四邊形

 

平行四邊形的制作方式是使用transform屬性使長方形傾斜一個角度。

#parallelogram {

     width : 160px ;

     height : 100px ;

     background : #8734f7 ;

     -webkit- transform : skew( 30 deg);

     -moz- transform : skew( 30 deg);

     -o- transform : skew( 30 deg);

     transform : skew( 30 deg);

}                             

 星形

 

星形的HTML結構同樣使用一個帶ID的空div。星形的實現方式比較復雜，主要是使用transform屬性來旋轉不同的邊。仔細體會下面的代碼。

#star {

     width : 0 ;

     height : 0 ;

     margin : 50px 0 ;

     color : #fc2e5a ;

     position : relative ;

     display : block ;

     border-right : 100px solid transparent ;

     border-bottom : 70px solid #fc2e5a ;

     border-left : 100px solid transparent ;

     -moz- transform : rotate ( 35 deg);

     -webkit- transform : rotate ( 35 deg);

     -ms- transform : rotate ( 35 deg);

     -o- transform : rotate ( 35 deg);

}

  

#star:before {

     height : 0 ;

     width : 0 ;

     position : absolute ;

     display : block ;

     top : -45px ;

     left : -65px ;

     border-bottom : 80px solid #fc2e5a ;

     border-left : 30px solid transparent ;

     border-right : 30px solid transparent ;

     content : '' ;

     -webkit- transform : rotate ( -35 deg);

     -moz- transform : rotate ( -35 deg);

     -ms- transform : rotate ( -35 deg);

     -o- transform : rotate ( -35 deg);

}

  

#star:after {

     content : '' ;

     width : 0 ;

     height : 0 ;

     position : absolute ;

     display : block ;

     top : 3px ;

     left : -105px ;

     color : #fc2e5a ;

     border-right : 100px solid transparent ;

     border-bottom : 70px solid #fc2e5a ;

     border-left : 100px solid transparent ;

     -webkit- transform : rotate ( -70 deg);

     -moz- transform : rotate ( -70 deg);

     -ms- transform : rotate ( -70 deg);

     -o- transform : rotate ( -70 deg);

}                             

 六角星形

和五角星的制作方法不同，六角星形狀的制作方法是操縱border屬性來制作兩半圖形，然后合並它們。

#star_six_points {

     width : 0 ;

     height : 0 ;

     display : block ;

     position : absolute ;

     border-left : 50px solid transparent ;

     border-right : 50px solid transparent ;

     border-bottom : 100px solid #de34f7 ;

     margin : 10px auto ;

}

  

#star_six_points:after {

     content : "" ;

     width : 0 ;

     height : 0 ;

     position : absolute ;

     border-left : 50px solid transparent ;

     border-right : 50px solid transparent ;

     border-top : 100px solid #de34f7 ;

     margin : 30px 0 0 -50px ;

}                             

 五邊形

創建CSS五邊形需要結合兩個圖形：一個梯形，然后在它的上面放一個三角形，共同組成一個五邊形。

#pentagon {

     width : 54px ;

     position : relative ;

     border-width : 50px 18px 0 ;

     border-style : solid ;

     border-color : #277bab transparent ;

}

  

#pentagon:before {

     content : "" ;

     height : 0 ;

     width : 0 ;

     position : absolute ;

     top : -85px ;

     left : -18px ;

     border-width : 0 45px 35px ;

     border-style : solid ;

     border-color : transparent transparent #277bab ;

}                             

 六邊形

 

六邊形的制作方法可以有很多種，可以像五邊形一樣，先制作一個長方形，然后在它的上面和下面各放置一個三角形。

#hexagon {

     width : 100px ;

     height : 55px ;

     background : #fc5e5e ;

     position : relative ;

     margin : 10px auto ;

}

  

#hexagon:before {

     content : "" ;

     width : 0 ;

     height : 0 ;

     position : absolute ;

     top : -25px ;

     left : 0 ;

     border-left : 50px solid transparent ;

     border-right : 50px solid transparent ;

     border-bottom : 25px solid #fc5e5e ;

}

  

#hexagon:after {

     content : "" ;

     width : 0 ;

     height : 0 ;

     position : absolute ;

     bottom : -25px ;

     left : 0 ;

     border-left : 50px solid transparent ;

     border-right : 50px solid transparent ;

     border-top : 25px solid #fc5e5e ;

}                             

 八角形

八角形的制作方法也有多種方式，這里使用的是先制作兩個相同的梯形，然后在兩邊分別放置一個三角形。

#octagon {

     width : 100px ;

     height : 100px ;

     background : #ac60ec ;

     position : relative ;

}

  

#octagon:before {

     content : "" ;

     width : 42px ;

     height : 0 ;

     position : absolute ;

     top : 0 ;

     left : 0 ;

     border-bottom : 29px solid #ac60ec ;

     border-left : 29px solid #f4f4f4 ;

     border-right : 29px solid #f4f4f4 ;

}

  

#octagon:after {

     content : "" ;

     width : 42px ;

     height : 0 ;

     position : absolute ;

     bottom : 0 ;

     left : 0 ;

     border-top : 29px solid #ac60ec ;

     border-left : 29px solid #f4f4f4 ;

     border-right : 29px solid #f4f4f4 ;

}                             

 心形

心形的制作是非常復雜的，可以使用偽元素來制作，分別將偽元素旋轉不同的角度，並修改transform-origin屬性來元素的旋轉中心點。

#heart {

     position : relative ;

}

  

#heart:before,#heart:after {

     content : "" ;

     width : 70px ;

     height : 115px ;

     position : absolute ;

     background : red ;

     left : 70px ;

     top : 0 ;

     -webkit- border-radius : 50px 50px 0 0 ;

     -moz- border-radius : 50px 50px 0 0 ;

     border-radius : 50px 50px 0 0 ;

     -webkit- transform : rotate ( -45 deg);

     -moz- transform : rotate ( -45 deg);

     -ms- transform : rotate ( -45 deg);

     -o- transform : rotate ( -45 deg);

     transform : rotate ( -45 deg);

     -webkit- transform-origin : 0 100% ;

     -moz- transform-origin : 0 100% ;

     -ms- transform-origin : 0 100% ;

     -o- transform-origin : 0 100% ;

     transform-origin : 0 100% ;

}

  

#heart:after {

     left : 0 ;

     -webkit- transform : rotate ( 45 deg);

     -moz- transform : rotate ( 45 deg);

     -ms- transform : rotate ( 45 deg);

     -o- transform : rotate ( 45 deg);

     transform : rotate ( 45 deg);

     -webkit- transform-origin : 100% 100% ;

     -moz- transform-origin : 100% 100% ;

     -ms- transform-origin : 100% 100% ;

     -o- transform-origin : 100% 100% ;

     transform-origin : 100% 100% ;

}                             

 蛋形

 

蛋形時橢圓形的一個變體，它的高度要比寬度稍大，並且設置正確的border-radius屬性即可以制作出一個蛋形。

#egg {

     width : 136px ;

     height : 190px ;

     background : #ffc000 ;

     display : block ;

     -webkit- border-radius : 63px 63px 63px 63px / 108px 108px 72px 72px ;

     border-radius : 50% 50% 50% 50% / 60% 60% 40% 40% ;

}                             

 無窮符號

無窮符號可以通過border屬性和設置偽元素的角度來實現。

#infinity {

     width : 220px ;

     height : 100px ;

     position : relative ;

}

  

#infinity:before,#infinity:after {

     content : "" ;

     width : 60px ;

     height : 60px ;

     position : absolute ;

     top : 0 ;

     left : 0 ;

     border : 20px solid #06c999 ;

     -moz- border-radius : 50px 50px 0 ;

     border-radius : 50px 50px 0 50px ;

     -webkit- transform : rotate ( -45 deg);

     -moz- transform : rotate ( -45 deg);

     -ms- transform : rotate ( -45 deg);

     -o- transform : rotate ( -45 deg);

     transform : rotate ( -45 deg);

}

  

#infinity:after {

     left : auto ;

     right : 0 ;

     -moz- border-radius : 50px 50px 50px 0 ;

     border-radius : 50px 50px 50px 0 ;

     -webkit- transform : rotate ( 45 deg);

     -moz- transform : rotate ( 45 deg);

     -ms- transform : rotate ( 45 deg);

     -o- transform : rotate ( 45 deg);

     transform : rotate ( 45 deg);

}                             

 消息提示框

 

消息提示框可以先制作一個圓角矩形，然后在需要的地方放置一個三角形。

#comment_bubble {

     width : 140px ;

     height : 100px ;

     background : #088cb7 ;

     position : relative ;

     -moz- border-radius : 12px ;

     -webkit- border-radius : 12px ;

     border-radius : 12px ;

}

  

#comment_bubble:before {

     content : "" ;

     width : 0 ;

     height : 0 ;

     right : 100% ;

     top : 38px ;

     position : absolute ;

     border-top : 13px solid transparent ;

     border-right : 26px solid #088cb7 ;

     border-bottom : 13px solid transparent ;

}                             

 吃豆人

 

吃豆人的制作方法是先在一個圓形里面制作一個透明的三角形。

#pacman {

     width : 0 ;

     height : 0 ;

     border-right : 70px solid transparent ;

     border-top : 70px solid #ffde00 ;

     border-left : 70px solid #ffde00 ;

     border-bottom : 70px solid #ffde00 ;

     border-top-left-radius : 70px ;

     border-top-right-radius: 70px ;

     border-bottom-left-radius: 70px ;

     border-bottom-right-radius : 70px ;

}                             

 小