CSS writes hexagons

The HTML code

  <span class="goods-rank">
            <span class="goods-rank-child">
                <span class="goods-rank-cc">
                    1
                </span>
            </span>
        </span>
        <span class="goods-rank">
            <span class="goods-rank-child">
                <span class="goods-rank-cc goods-rank-cc2">
                    2
                </span>
            </span>
        </span>
        <span class="goods-rank">
            <span class="goods-rank-child">
                <span class="goods-rank-cc goods-rank-cc3">
                    3
                </span>
            </span>
        </span>
Copy the code

CSS code

.goods-rank { display: block; width: 3vh; Height: 3.4 the vh; The line - height: 3.4 the vh; text-align: center; overflow: hidden; vertical-align: middle; transform: rotate(120deg); } .goods-rank-child { display: block; width: 100%; height: 100%; overflow: hidden; transform: rotate(-60deg); } .goods-rank-cc { display: block; width: 100%; height:100%; overflow: hidden; transform: rotate(-60deg); background-image: radial-gradient(rgba(255, 216, 33, 0), rgba(255, 216, 33, 1)); } .goods-rank-cc2{ background-image: radial-gradient(rgba(204, 203, 196, 0), rgba(204, 203, 196, 1)); } .goods-rank-cc3{ background-image: radial-gradient(rgba(228, 102, 2, 0), rgba(228, 102, 2, 1)); }Copy the code

The effect looks like