Twitter bootstrap CSS创建的六边形中放置的字体图标出现意外变形

我正在尝试使用fa class的字体awesomeI标记将社交媒体图标添加到六边形背景中。社交媒体图标都应该在六边形背景中并排放置，并在鼠标悬停时更改背景颜色。然而，我遇到的问题如下：

更新小提琴几乎正确，我们只需要能够使shpae看起来像六边形

问题：

* { 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;
    }

1.社交媒体图标被六边形扭曲

2.现在六边形在悬停时不会改变背景色

3.社交媒体图标应该更能响应img

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>

---

您正在转换子元素，不应该这样。只需将图标恢复原状即可（但请确保这是之后的。hexagon:after）：

工作示例：

如果您无法根据自己的需要使用scales和CSS，也许您可以使用这样的库。看起来正是你想要的

---

我将Sixagon I 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);
}

感谢迈克·巴维克，他帮我找到了大部分答案。多亏了他的帮助，我才解决了我的问题

这是工作小提琴：

---

如何填充整个六边形？它仍然看起来像是一个正方形的顶排是六边形的…除非我遗漏了什么！？将

.hexagon i

放在hexagon后面。在六边形之后：在；）检查我的小提琴回答。当你在六边形上悬停时，它会显示一个不同颜色的正方形。在悬停时，六边形应完全填满并改变颜色

* { 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);
}