使用CSS樣式,製作六邊形

來源:互聯網
上載者:User

標籤:微軟   alt   char   lazy   不同   bsp   效果   分享   img   


 



          在製作網上中,經常會遇到繪製其它不規則的圖形,如六邊形,八邊形這類的,在複雜的圖形,也是由我們的基本圖形組成了,如上面的六邊形,就是由兩個三角形,一個矩形組成。 
   先看看,如何繪製三角形 ,與四邊形。         三角形: 
                      <div class="triangle"></div> 
                      .triangle{ 
                           width: 0px;   
                          height: 0px;   
                         border-width: 80px; 
                          border-color:transparent transparent green; 
                          border-style: solid; 
                      } 
         註: 將寬與高設定為0,設定邊框的寬度,及樣式的樣式,最後將上,左,右邊的邊框,設定成透明色,這樣我們就可以得到想到的三角形。 
          

            四邊形: 
                      與三角形設定類似,不同的是,需要設定div的寬度,我們需要一個小的四邊形與一個大的四邊形,改變寬度的大小即可: 
                        <div class="fourangle"></div> 
                        <div class="fourangle2"></div>           
                         .fourangle{ 
                                    width: 70px;   
                                   height: 0px;   
                                   border-width: 80px; 
                                    border-color:transparent transparent green; 
                                    border-style: solid; 
                            } 
                            .fourangle2{ 
                                    width: 100px;   
                                   height: 0px;   
                                   border-width: 80px; 
                                    border-color:transparent transparent green; 
                                    border-style: solid; 
                            } 
               效果 
                     




     完整六邊形代碼如下: 
<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style type="text/css"> 
        #shape{ 
            margin: 200px 0px 0px 200px; 
            position: relative; 
            width: 300px; 
            height: 500px; 
            /*border: 1px solid red;*/ 
          overflow: hidden; 
          background-image: url("img/bg/bg1.png"); 
            background-position: center; 
        } 
        #div1{ 
            position: absolute; 
            top:-150px; 
            width: 0px; 
            height: 0px; 
            border-width: 150px;   
          border-color:white white transparent; 
          border-style: solid; 

        } 
        #rect{ 
            /*border: 1px solid green;*/ 
            position: absolute; 
            top:150px; 
            width: 300px; 
            height: 200px; 

        } 
        #div2{ 
            position: absolute; 
            top:350px; 
            width: 0px; 
            height: 0px; 
            border-width: 150px; 
           border-color:transparent white; 
           border-style: solid; 

        } 
    </style> 
</head> 
<body> 
   <div id="shape"> 
       <div id="div1"></div> 
       <div id="rect"></div> 
       <div id="div2"></div> 
   </div> 
</body> 
</html>

使用CSS樣式,製作六邊形

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.