CSS製作六角形排版

  #btn-group-wrap{

                        width:1025px;
                        position:absolute;
                        z-index:0;

                        .lab_item {
                            width: 205px;
                            height: 230px;
                            position: relative;
                            display: inline-block;
                            &:nth-child(8n-2) {
                                margin-left: 101px;
                            }

                            &:nth-child(n+5) {
                                margin-top: -55px;
                            }
                            &.opacity{
                                @include opacity(0.2);
                                cursor: default;

                                .hexagon-in2:hover {
                                    -webkit-box-shadow: initial;
                                    box-shadow: initial;
                                }
                            }
                            &.hidden{
                                @include opacity(0);
                                cursor: default;
                            }

                        }

                        .hexagon2 {
                            position: absolute;
                            width: 200px;
                            height: 400px;
                            top: -85px;
                        }

                        .hexagon {
                            overflow: hidden;
                            visibility: hidden;
                            cursor: pointer;
                            @include transform('rotate(120deg)');
                        }
                        .hexagon-in1 {
                            overflow: hidden;
                            width: 100%;
                            height: 100%;
                            @include transform('rotate(-60deg)');
                        }

                        .hexagon-in2 {
                            -webkit-box-shadow: inset 0 0 0 200px rgba(000, 000, 000, 0.5);
                            box-shadow: inset 0 0 0 200px rgba(000, 000, 000, 0.5);
                            background: #fff;
                            overflow: hidden;
                            width: 100%;
                            height: 100%;
                            background-repeat: no-repeat;
                            background-position: 50%;
                            visibility: visible;
                            position:relative;
                            @include background-size('100%');
                            @include transform('rotate(-60deg)');
                            @include transition('all 0.5s ease');

                            .label{
                                    text-align: center;
                                    position: absolute;
                                    bottom: 23%;
                                    height: 50px;
                                    background: #000;
                                    left: 22%;
                                    width: 100%;
                                    color: #fff;
                                    padding: 2%;
                                    @include background-opacity(#000,0.6);
                                    @include transform('rotate(-30deg)');
                            }
                        }

                        .hexagon-in2:hover {
                            -webkit-box-shadow: inset 0 0 0 0px #000;
                            box-shadow: inset 0 0 0 0px #000;
                        }
}

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
    $(function() {

        var enable_btn = [14,23,17,18,19,21,22,29]; //display number
        var hide_btn = [20,25,10,6]; //hide number
        var set_label = '';
        var set_state = '';
        for (var i=0;i<=30;i++) {
            set_state = ($.inArray(i, enable_btn) != -1) ? '' : ($.inArray(i, hide_btn) != -1) ? 'hidden':'opacity';

            switch(i){
                case 17:
                    set_label = 'Micromotor system';
                break;
                case 18:
                    set_label = 'Mold Maker';
                break;
                default:
                    set_label = '';
                break;
            }
            

            $("#btn-group-wrap").append('<div id="button_'+i+'" class="lab_item '+set_state+'" title="'+i+'"><div class="hexagon hexagon2"><div class="hexagon-in1"><div class="hexagon-in2"><div class="label">'+set_label+'</div></div></div></div></div>');
        }
    })
    </script>