RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案

我们设定三个矩形的宽高分别为60px和104px,背景色为蓝色,.hexagon__item_left旋转-60deg,.hexagon__item_right旋转60deg,.hexagon__item_center不旋转。

  .hexagon {
            width: 60px;
            height: 104px;
            position: relative;
            margin: 200px auto;
        }

        .hexagon__item {
            width: 100%;
            height: 100%;
            background: blue;
            position: absolute;
            top: 0;
            left: 0;
        }

        .hexagon__item_left {
            transform: rotate(-60deg);
        }

        .hexagon__item_right {
            transform: rotate(60deg);
        }

这样就简单的得到了一个正六边形。

那么我们要如何才能使得蓝色背景变成图片呢,其实也很简单,上述的三个矩形其实只是起到了一个塑形的作用,实际上是应该设置为 visibility: hidden 的,我们需要给三个矩形分别添加一个矩形的子元素并且设置为 visibility: visible 。

三个子元素的宽高需要正好能覆盖之前的蓝色六边形。

做好代码如下,大家可以好好研究一下




    
    
    
    Document
    



    
        
        
        
    

以上是“CSS怎么实现图片背景填充的六边形”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


本文标题:CSS怎么实现图片背景填充的六边形
本文链接:http://xdwzjz.cn/article/jgdgss.html
Top