字體真棒圖標放置在CSS創建六角形意外扭曲

Question

我試圖添加社會媒體圖標字體真棒我與fa類標記爲Hexagon背景。社交媒體圖標應該全部坐在六邊形背景內相鄰，並在懸停時更改背景顏色。然而，我發現了問題如下：

UPDATE小提琴幾乎是正確的，我們只是需要能夠使shpae看起來像一個六角https://jsfiddle.net/onkkdef6/4/

問題：

1.社交媒體圖標被扭曲的六角形

2.六邊形現在不會懸停改變背景顏色

社交媒體圖標應更多IMG響應

https://jsfiddle.net/onkkdef6/

HTML

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> 


      <div class="row"> 


       <div class="social"> 
        <ul> 
        <li><a class="hexagon" href="#"><i class="fa fa-lg fa-linkedin"></i> </a> </li> 
        <li><a class="hexagon" href="#"><i class="fa fa-lg fa-twitter"></i> </a> </li> 
         <li><a class="hexagon" href="#"><i class="fa fa-lg fa-facebook"></i> </a> </li> 
        <li><a class="hexagon" href="#"><i class="fa fa-lg fa-yelp"></i></a></li> 
        <li><a class="hexagon" href="#"><i class="fa fa-lg fa-instagram"></i></a></li> 
        </ul> 
       </div> 


         <div class="social"> 
        <ul> 
        <li><a class="" href="#"><i class="fa fa-lg fa-linkedin"></i> </a> </li> 
        <li><a class="" href="#"><i class="fa fa-lg fa-twitter"></i> </a> </li> 
         <li><a class="" href="#"><i class="fa fa-lg fa-facebook"></i> </a> </li> 
        <li><a class="" href="#"><i class="fa fa-lg fa-yelp"></i></a></li> 
        <li><a class="" href="#"><i class="fa fa-lg fa-instagram"></i></a></li> 
        </ul> 
       </div> 


       </div> 

CSS：

* { box-sizing: border-box; margin: 0; padding: 0; } 



    .hexagon { 
     position: relative; 
     display: inline-block; 
     overflow: hidden; 
     margin: 0 8.5%; 
     padding: 16%; 
     transform: rotate(30deg) skewY(30deg) scaleX(.866); /* .866 = sqrt(3)/2 */ 
    } 
    .hexagon:before{ 
     display: block; 
     position: absolute; /* 86.6% = (sqrt(3)/2)*100% = .866*100% */ 
     top: 6.7%; right: 0; bottom: 6.7%; left: 0; /* 6.7% = (100% -86.6%)/2 */ 
     transform: scaleX(1.155) skewY(-30deg) rotate(-30deg); /* 1.155 = 2/sqrt(3) */ 
     background-color: rgba(30,144,255,.56); 
     background-size: cover; 
     content: ''; 
    } 


     .social { 
     margin: 0; 
     padding: 0; 
    } 

    .social ul { 
     margin: 0; 
     padding: 5px; 
    } 

    .social ul li { 
     margin: 5px; 
     list-style: none outside none; 
     display: inline-block; 
    } 


     .social i { 
     width:80px; 
     height: 80px; 
     color: #FFF; 
     background-color: #333; 
     font-size: 42px; 
     text-align:center; 
     padding-top: 25px; 

     transition: all ease 0.3s; 
     -moz-transition: all ease 0.3s; 
     -webkit-transition: all ease 0.3s; 
     -o-transition: all ease 0.3s; 
     -ms-transition: all ease 0.3s; 
    } 

    .social i:hover { 

     text-decoration: none; 
     transition: all ease 0.3s; 
     -moz-transition: all ease 0.3s; 
     -webkit-transition: all ease 0.3s; 
     -o-transition: all ease 0.3s; 
     -ms-transition: all ease 0.3s; 
    } 

     .social .fa-facebook:hover { /* round facebook icon*/ 
     background: #4060A5; 
    } 

    .social .fa-twitter:hover { /* round twitter icon*/ 
     background: #00ABE3; 
    } 

    .social .fa-yelp:hover { /* round google plus icon*/ 
     background: #e64522; 
    } 


    .social .fa-linkedin:hover { /* round linkedin icon*/ 
     background: #0094BC; 
    } 


    .social .fa-instagram:hover { /* round instagram icon*/ 
     background: #375989; 
    } 

Answer 1

你轉化子元素 - 而且不應該。剛剛恢復的圖標後面 - 像這樣（但要確保這是後.hexagon：後）：

.hexagon i { 
    transform: rotate(-45deg) skewY(0) scaleX(1.866); 
} 

工作例如： https://jsfiddle.net/onkkdef6/4/

如果您不能玩弄比例尺和CSS來滿足您的需求，也許您可​​以使用這樣的庫。看起來正是你想要的。

http://ninodezign.com/css3-hexagon-buttons/

Answer 2

我改變了我的scaleX 2.4六邊形以獲得所需的六邊形我一直在尋找。

.hexagon i { 
    transform: rotate(-45deg) skewY(0) scaleX(2.4); 
} 

這是一個完整的工作CSS：

* { box-sizing: border-box; margin: 0; padding: 0; } 



.hexagon { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    margin: 0 8.5%; 
    padding: 16%; 
    transform: rotate(30deg) skewY(30deg) scaleX(.866); /* .866 = sqrt(3)/2 */ 
} 
.hexagon:before{ 
    display: block; 
    position: absolute; /* 86.6% = (sqrt(3)/2)*100% = .866*100% */ 
    top: 6.7%; right: 0; bottom: 6.7%; left: 0; /* 6.7% = (100% -86.6%)/2 */ 
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg); /* 1.155 = 2/sqrt(3) */ 
    /* background-color: rgba(30,144,255,.56); */ 
    background-size: cover; 
    content: ''; 
} 


    .social { 
    margin: 0; 
    padding: 0; 
} 

.social ul { 
    margin: 0; 
    padding: 5px; 
} 

.social ul li { 
    margin: 5px; 
    list-style: none outside none; 
    display: inline-block; 
} 


    .social i { 
    width:80px; 
    height: 80px; 
    color: #FFF; 
    background-color: #333; 
    font-size: 42px; 
    text-align:center; 
    padding-top: 25px; 

    transition: all ease 0.3s; 
    -moz-transition: all ease 0.3s; 
    -webkit-transition: all ease 0.3s; 
    -o-transition: all ease 0.3s; 
    -ms-transition: all ease 0.3s; 
} 

.social i:hover { 

    text-decoration: none; 
    transition: all ease 0.3s; 
    -moz-transition: all ease 0.3s; 
    -webkit-transition: all ease 0.3s; 
    -o-transition: all ease 0.3s; 
    -ms-transition: all ease 0.3s; 
} 

    .social .fa-facebook:hover { /* round facebook icon*/ 
    background: #4060A5; 
} 

.social .fa-twitter:hover { /* round twitter icon*/ 
    background: #00ABE3; 
} 

.social .fa-yelp:hover { /* round google plus icon*/ 
    background: #e64522; 
} 


.social .fa-linkedin:hover { /* round linkedin icon*/ 
    background: #0094BC; 
} 


.social .fa-instagram:hover { /* round instagram icon*/ 
    background: #375989; 
} 

.hexagon i { 
    transform: rotate(-45deg) skewY(0) scaleX(2.4); 
} 

感謝Mike巴威克誰幫我算出來的答案。感謝他的幫助，我解決了我的問題。

這是工作提琴： https://jsfiddle.net/onkkdef6/5/