css3繪製六邊形

標籤：border   .sh   三角形   ott   繪製   images   text   parent   abs   

 

六邊形思路：使用CSS3繪製六邊形主要使用偽類:before和:after在源元素之前和之後再繪製兩個元素，並利用css3的邊框樣式，將這兩個元素變成三角形放置在源元素的兩端即可。

 

 

<h2>三角形在左右兩側</h2><!-- 第一種方法 不相容低版本瀏覽器 -->   <div class="hexagon1"></div>   <!-- 第二種方法  相容低版本瀏覽器 -->   <div class="hexagon2">        <div class="left"></div>        <div class="right"></div>   </div>    <h2>三角形在上下兩側</h2>    <div class="hexagon3"></div>

.hexagon1{        width: 50px;        height: 80px;        background-color:#6c6 ;        position: relative;        margin:0 auto;    }    .hexagon1::before{        width: 0;        height: 0;        content: ‘‘;        position: absolute;        top: 0;        left:-20px;        border-right: 20px solid #6c6;        border-top:40px solid transparent;        border-bottom:40px solid transparent;    }    .hexagon1::after{        width: 0;        height: 0;        content: ‘‘;        position: absolute;        top: 0;        right:-20px;        border-left: 20px solid #6c6;        border-top:40px solid transparent;        border-bottom:40px solid transparent;    }    .hexagon2{        width: 50px;        height: 80px;        background-color:orange ;        position: relative;        margin:0 auto;    }      .hexagon2 .left{        width: 0;        height: 0;        position: absolute;        left: -20px;        top: 0;        border-right: 20px solid orange;        border-top: 40px solid transparent;        border-bottom: 40px solid transparent;      }      .hexagon2 .right{        width: 0;        height: 0;        position: absolute;        right: -20px;        top: 0;        border-left: 20px solid orange;        border-top: 40px solid transparent;        border-bottom: 40px solid transparent;      }      /*三角形在上下側*/      .hexagon3{        width: 80px;        height: 40px;        background-color: blue;        margin:0 auto;        position: relative;      }      .hexagon3::before{        width: 0;        height: 0;        content: ‘‘;        position: absolute;        top: -20px;        left: 0;        border-bottom: 20px solid blue;        border-left: 40px solid transparent;        border-right: 40px solid transparent;      }      .hexagon3::after{        width: 0;        height: 0;        content: ‘‘;        position: absolute;        bottom: -20px;        left: 0;        border-top: 20px solid blue;        border-left: 40px solid transparent;        border-right: 40px solid transparent;      }

 

 

.sharp:before{         content:"";　         width:0px;         border-bottom:80px solid transparent;         border-top:80px solid transparent;         border-right:40px solid #6c6;         position:absolute;         left:-40px;         top:0px;     }     .sharp{         min-width:100px;         height:160px;         background:#6c6;         display: inline-block;         position: absolute;         line-height: 160px;         color:#FFFFFF;         font-size: 20px;         text-align: center;     }     .sharp:after{         content:"";　　         width:0px;         border-bottom:80px solid transparent;         border-top:80px solid transparent;         border-left:40px solid #6c6;         position:absolute;         right:-40px;         top:0px;     }        #sharpContainer{            width:100%;            height: 600px;        }        #sharpContainer .center{            top:200px;            left:300px;        }         #sharpContainer .top{             top:20px;             left:300px;         }         #sharpContainer .top-left{             top:110px;             left:140px;         }         #sharpContainer .top-right{             top:110px;             left:460px;         }         #sharpContainer .bottom{             top:380px;             left:300px;         }         #sharpContainer .bottom-left{             top:290px;             left:140px;         }         #sharpContainer .bottom-right{             top:290px;             left:460px;         }

 

<div id="sharpContainer">    <div class="sharp center"></div>    <div class="sharp top"></div>    <div class="sharp top-left"></div>    <div class="sharp top-right"></div>    <div class="sharp bottom"></div>    <div class="sharp bottom-left"></div>    <div class="sharp bottom-right"></div></div>

 

css3繪製六邊形