• Thiết kế website bán hàng miễn phí 2018

Tạo menu 6 cạnh Hexagon Shapes With Pure CSS3

 Cách tạo menu 6 cạnh tuyệt đêp ! lạ và ý tưởng ! thích hợp bạn nào thích dùng cái mới trong thiết kế web ! Create Beautiful Hexagon Shapes With Pure CSS3

        
  •     
  • class="hex" style="background-image: url(images/2.jpg);">        
  •      href="#">        
  •      class="corner-1">
  •      class="corner-2">
  •         
  • CSS

    Alright, it will be a little bit complicated in CSS section. A hexagon has six edges and each angle is 60 degree. We are going to build a hexagon with 3 rectangles. Referring to the picture below, in step 1 to 3, we are placing 2 rectangles on top of the main one and rotate them 60 degree. That's how a hexagon is made.

    For the background image, there is more work to make it display correctly. Because we have rotated both corners, the background image is rotated as well. Therefore, to rectify this, we will be using :before to duplicate its content, rotate it back, make it a square, and mask it with overflow:hidden.

    Here I have another illustration to let you see it a little bit more clearly.

    1. .hex {
    2.     width:150px;
    3.     height:86px;
    4.     background-color: #ccc;
    5.     background-repeat: no-repeat;
    6.     background-position: 50% 50%;            
    7.     background-size: auto 173px;                            
    8.     position: relative;
    9.     float:left;
    10.     margin:25px 5px;
    11.     text-align:center;
    12.     zoom:1;
    13. }
    14.         
    15.     .hex.hex-gap {
    16.         margin-left: 86px;
    17.     }
    18.     
    19.     .hex a {
    20.         display:block;
    21.         width: 100%;
    22.         height:100%;
    23.         text-indent:-9999em;
    24.         position:absolute;
    25.         top:0;
    26.         left:0;
    27.     }
    28.     .hex .corner-1,
    29.     .hex .corner-2 {
    30.         position: absolute;
    31.         top:0;
    32.         left:0;
    33.         width:100%;
    34.         height:100%;
    35.         background: inherit;                                
    36.         z-index:-2;                        
    37.         overflow:hidden;        
    38.         backface-visibility: hidden;            
    39.     }
    40.     
    41.     .hex .corner-1 {
    42.         z-index:-1;
    43.         transform: rotate(60deg);
    44.     }
    45.     
    46.     .hex .corner-2 {
    47.         transform: rotate(-60deg);
    48.     }
    49.     
    50.     .hex .corner-1:before,
    51.     .hex .corner-2:before {
    52.         width: 173px;
    53.         height:    173px;
    54.      content: '';
    55.      position: absolute;
    56.      background: inherit;
    57.      top:0;
    58.      left: 0;
    59.      z-index: 1;
    60.      background: inherit;
    61.      background-repeat:no-repeat;
    62.         backface-visibility: hidden;                
    63.     }            
    64.     
    65.     .hex .corner-1:before {
    66.         transform: rotate(-60deg) translate(-87px, 0px);    
    67.      transform-origin: 0 0;
    68.     }            
    69.     
    70.     .hex .corner-2:before {
    71.         transform: rotate(60deg) translate(-48px, -11px);    
    72.         bottom:0;
    73.     }        
    74.     
    75.     /* Custom styles*/
    76.     .hex .inner {        
    77.         color:#eee;
    78.     }
    79.     
    80.     .hex h4 {
    81.         font-family: 'Josefin Sans', sans-serif;        
    82.         margin:0;            
    83.     }
    84.     
    85.     .hex hr {
    86.         border:0;
    87.         border-top:1px solid #eee;
    88.         width:60%;
    89.         margin:15px auto;
    90.     }
    91.     
    92.     .hex p {
    93.         font-size:16px;
    94.         font-family: 'Kotta One', serif;
    95.         width:80%;
    96.         margin:0 auto;
    97.     }
    98.     .hex.hex-1 {
    99.         background: #74cddb;
    100.     }
    101.     
    102.     .hex.hex-2 {
    103.         background: #f5c53c;
    104.     }
    105.     
    106.     .hex.hex-3 {
    107.         background: #80b971;
    108.     }

    Conclusion

    This hexagon shape tutorial is pretty straight forward. It took me a while to figure it out and along the process of experiementing, I did pick up a few tricks such as CSS transform and masking. I hope you enjoy this, if you have any questions, drop us a comment. If you liked this, please share it via social media. Thanks :)

    Share facebookShare facebook

    Facebook Comments

    Tin Cùng Chuyên Mục

    Trang 1 / 1

    Bạn đã đọc tin này chưa ?

    Go Top