html+css实现蜂窝状分布排列

html

　　　<ul>
        <li>
          <span class="hex"><span class="hexIn">1</span></span>
        </li>
        <li>
          <span class="hex"><span class="hexIn">2</span></span>
        </li>
        <li>
          <span class="hex"><span class="hexIn">3</span></span>
        </li>
        <li>
          <span class="hex"><span class="hexIn">4</span></span>
        </li>
        <li>
          <span class="hex"><span class="hexIn">5</span></span>
        </li>
        <li>
          <span class="hex"><span class="hexIn">6</span></span>
        </li>
        <li>
          <span class="hex"><span class="hexIn">7</span></span>
        </li>
        <li>
          <span class="hex"><span class="hexIn">8</span></span>
        </li>
        <li>
          <span class="hex"><span class="hexIn">9</span></span>
        </li>
        <li>
          <span class="hex"><span class="hexIn">10</span></span>
        </li>
    </ul>

css

    <style>
        ul {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
            width: 560px;
            margin: 100px auto;
        }
        li {
            float: left;
            margin: 0 5px;
            height: 96px;
        }
        .hex {
            overflow: hidden;
            display: block;
            width: 100px;
            height: 116px;
            transform: rotate(-60deg) skewY(30deg);
        }
        .hexIn {
            background-color: #ccc;
            display: block;
            width: 100px;
            height: 116px;
            line-height: 116px;
            text-align: center;
            transform: skewY(-30deg) rotate(60deg);
        }
        li:nth-child(9n + 6) {
            margin-left: 60px;
        }
    </style>

 效果