css实现六边形

拷贝的代码顺便记录一下
效果图如下
这里写图片描述
<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>CSS3 实现六边形图片展示效果</title>
        <style type="text/css">
            body,
            div,
            img,
            ul,
            li {
                margin: 0;
                padding: 0;
            }

            body {
                font-size: 12px;
                background-color: #DDD;
                min-width: 1200px;
            }

            ul,
            ul li {
                list-style: none;
            }

            .clear {
                clear: both;
            }

            .box {
                position: relative;
                width: 630px;
                margin: 100px auto;
            }

            .lineF,
            .lineS {
                position: absolute;
                visibility: hidden;
            }

            .lineS {
                top: 182px;
                left: 105px;
            }

            .boxF,
            .boxS,
            .boxT,
            .overlay {
                width: 200px;
                height: 250px;
                overflow: hidden;
            }

            .boxF,
            .boxS {
                visibility: hidden;
            }

            .boxF {
                transform: rotate(120deg);
                float: left;
                margin-left: 10px;
                -ms-transform: rotate(120deg);
                -moz-transform: rotate(120deg);
                -webkit-transform: rotate(120deg);
            }

            .boxS {
                transform: rotate(-60deg);
                -ms-transform: rotate(-60deg);
                -moz-transform: rotate(-60deg);
                -webkit-transform: rotate(-60deg);
            }

            .boxT {
                transform: rotate(-60deg);
                background: no-repeat 50% center;
                background-size: 125% auto;
                -ms-transform: rotate(-60deg);
                -moz-transform: rotate(-60deg);
                -webkit-transform: rotate(-60deg);
                visibility: visible;
            }

            .overlay {
                transition: all 250ms ease-in-out 0s;
                /* display: none; */
                position: relative;
                text-align: center;
                padding-top: 100px;
                height: 0px;
                color: white;
                bottom: -120px;
            }

            .overlay:hover {
                background-color: rgba(0, 0, 0, 0.6);
            }

            .boxT:hover .overlay {
                height: 300px;
                bottom: 0px;
                /* display: block; */
            }

            .overlay a {
                display: inline-block;
                position: absolute;
                left: 50%;
                top: 50%;
                margin: -16px 0 0 -16px;
                border-radius: 3px;
                background-color: #d3b850;
                text-align: center;
                line-height: 32px;
                width: 32px;
                height: 32px;
                text-decoration: none;
                color: White;
                font-size: 18px;
                font-weight: bolder;
            }
        </style>
    </head>

    <body>
        <div class="box">
            <div class="lineF">
                <div class="boxF">
                    <div class="boxS">
                        <div class="boxT" style="background-image: url(img/1.jpg);">
                            <div class="overlay">
                                水电费水电费 是的发生的f第三方 水电费水电费水电费 是的fsd发 sd发 sdf sdfsd发sdfsd发sd 是的fsd发 是的fsd发sd发 sd发
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>

</html>
里面字体高度的调节请改变overlay 的 padding-top:值就行;
猜你喜欢
