如何用css 绘制边长相等且有边框的六边形

最新推荐文章于 2023-10-20 13:31:40 发布
最新推荐文章于 2023-10-20 13:31:40 发布
阅读量6k 收藏 5
点赞数 1
分类专栏： 2016
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/badgirl_hong/article/details/53128842
版权
  • 首先，我的思路是六边形由一个长方形，两个三角形拼成。
  • css绘制有边框的三角形，比如你的六边形需要有白色的边框，红色的背景色，那么你的三角形则有白色的大三角形和红色的小三角形重叠在一起，组成一个白色边框的三角形。
  • 之前用before ，after写完无边框的六边形，写有边框的六边形只好推翻这种方法重新写了。。。
  • 我的项目是几个六边形，不规则的摆放，需要定位，给六边形添加hover效果。
  • 最终，六边形画出来之后，PSD是1920的大小，算是高分辨率了，无法自适应不同分辨率的屏幕，还得用rem,我用的是hotcss，不需要自己计算px与rem之间的转换  实现了自适应，hotcss的使用详情请点击这个链接： 点击打开链接。


实现效果：



html 代码：

        <div class="nav">
            <div class="hex-wrap clearfix hex-wrap1">
                <div class="hex-border-left hex-border-left1 pull-left">
                    <div class="hex-left"></div>
                </div>
                <div class="fore fore1 pull-left"><a href="javascript: void(0);">农业大数据</a></div>
                <div class="hex-border-right hex-border-right1 pull-left">
                    <div class="hex-right"></div>
                </div>
            </div>

            <div class="hex-wrap clearfix hex-wrap2">
                <div class="hex-border-left hex-border-left2 pull-left">
                    <div class="hex-left"></div>
                </div>
                <div class="fore fore2 pull-left"><a href="javascript: void(0);">物联监管</a></div>
                <div class="hex-border-right hex-border-right2 pull-left">
                    <div class="hex-right"></div>
                </div>
            </div>

            <div class="hex-wrap clearfix hex-wrap3">
                <div class="hex-border-left hex-border-left3 pull-left">
                    <div class="hex-left"></div>
                </div>
                <div class="fore fore3 pull-left"><a href="javascript: void(0);">畜牧</a></div>
                <div class="hex-border-right hex-border-right3 pull-left">
                    <div class="hex-right"></div>
                </div>
            </div>

            <div class="hex-wrap clearfix hex-wrap4">
                <div class="hex-border-left hex-border-left4 pull-left">
                    <div class="hex-left"></div>
                </div>
                <div class="fore fore4 pull-left"><a href="javascript: void(0);">质量溯源</a></div>
                <div class="hex-border-right hex-border-right4 pull-left">
                    <div class="hex-right"></div>
                </div>
            </div>

            <div class="hex-wrap clearfix hex-wrap5">
                <div class="hex-border-left hex-border-left5 pull-left">
                    <div class="hex-left"></div>
                </div>
                <div class="fore fore5 pull-left"><a href="javascript: void(0);">病虫害监测</a></div>
                <div class="hex-border-right hex-border-right5 pull-left">
                    <div class="hex-right"></div>
                </div>
            </div>

            <div class="hex-wrap clearfix hex-wrap6">
                <div class="hex-border-left hex-border-left6 pull-left">
                    <div class="hex-left"></div>
                </div>
                <div class="fore fore6 pull-left"><a href="javascript: void(0);">水产</a></div>
                <div class="hex-border-right hex-border-right6 pull-left">
                    <div class="hex-right"></div>
                </div>
            </div>
            <div class="hex-wrap clearfix hex-wrap7">
                <div class="hex-border-left hex-border-left7 pull-left">
                    <div class="hex-left"></div>
                </div>
                <div class="fore fore7 pull-left"><a href="javascript: void(0);">休闲旅游</a></div>
                <div class="hex-border-right hex-border-right7 pull-left">
                    <div class="hex-right"></div>
                </div>
            </div>
            <div class="hex-wrap clearfix hex-wrap8">
                <div class="hex-border-left hex-border-left8 pull-left">
                    <div class="hex-left"></div>
                </div>
                <div class="fore fore8 pull-left"><a href="javascript: void(0);">电子商务</a></div>
                <div class="hex-border-right hex-border-right8 pull-left">
                    <div class="hex-right"></div>
                </div>
            </div>
        </div>

css代码： 


/* 8个导航的样式 */
.content .nav {
    float: right;
    width: 750px;
    position: relative;
}
.hex-wrap {
    position: absolute;
    cursor: pointer;
}

.hex-wrap1 {
    left: 170px;
    top: 0px;
}

.hex-wrap2 {
    left: 90px;
    top: 148px;
}

.hex-wrap3 {
    left: 0px;
    top: 296px;
}

.hex-wrap4 {
    left: 300px;
    top: 94px;
}

.hex-wrap5 {
    left: 215px;
    top: 242px;
}

.hex-wrap6 {
    left: 516px;
    top: 27px;
}

.hex-wrap7 {
    left: 435px;
    top: 175px;
}

.hex-wrap8 {
    left: 348px;
    top: 323px;
}

.fore {
    /*绘制一个宽80px,高136px 的长方形*/
    width: 80px;
    height: 136px;
    text-align: center;
    position: relative;
    font-size: 24px;
    border-top: 1px solid #dfe8f2;
    border-bottom: 1px solid #dfe8f2;
}

.hex-border-left {
    position: relative;
    content: "";
    width: 0;
    height: 0;
    border-top: 69px solid transparent;
    border-bottom: 69px solid transparent;
}

.hex-left {
    /*左边的三角形*/
    content: "";
    width: 0;
    height: 0;
    border-top: 68px solid transparent;
    border-bottom: 68px solid transparent;
    position: absolute;
    left: 1px;
    top: -68px;
}

.hex-border-right {
    position: relative;
    content: "";
    width: 0;
    height: 0;
    border-top: 69px solid transparent;
    border-bottom: 69px solid transparent;
}

.hex-right {
    /*右边的三角形*/
    content: "";
    width: 0;
    height: 0;
    border-top: 68px solid transparent;
    border-bottom: 68px solid transparent;
    position: absolute;
    right: 1px;
    top: -68px;
}

.fore a {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    position: absolute;
    white-space: nowrap;
    width: 150px;
    text-align: center;
    display: block;
    top: 50px;
    left: -35px;
    z-index: 99;
}

.hex-border-left {
    border-right: 41px solid #fff;

}

.hex-border-right {
    border-left: 41px solid #fff;
}

.fore1 {
    background-color: #3498db;
}

.hex-border-left1 .hex-left {
    border-right: 40px solid #3498db;

}

.hex-border-right1 .hex-right {
    border-left: 40px solid #3498db;

}

.fore2 {
    background-color: #1abc9c;
}

.hex-border-left2 .hex-left {
    border-right: 40px solid #1abc9c;

}

.hex-border-right2 .hex-right {
    border-left: 40px solid #1abc9c;

}

.fore3 {
    background-color: #f1c40f;
}

.hex-border-left3 .hex-left {
    border-right: 40px solid #f1c40f;

}

.hex-border-right3 .hex-right {
    border-left: 40px solid #f1c40f;

}

.fore4 {
    background-color: #9b59b6;
}

.hex-border-left4 .hex-left {
    border-right: 40px solid #9b59b6;

}

.hex-border-right4 .hex-right {
    border-left: 40px solid #9b59b6;

}

.fore5 {
    background-color: #95a5a6;
}

.hex-border-left5 .hex-left {
    border-right: 40px solid #95a5a6;

}

.hex-border-right5 .hex-right {
    border-left: 40px solid #95a5a6;

}

.fore6 {
    background-color: #e74c3c;
}

.hex-border-left6 .hex-left {
    border-right: 40px solid #e74c3c;

}

.hex-border-right6 .hex-right {
    border-left: 40px solid #e74c3c;

}

.fore7 {
    background-color: #2ecc71;
}

.hex-border-left7 .hex-left {
    border-right: 40px solid #2ecc71;

}

.hex-border-right7 .hex-right {
    border-left: 40px solid #2ecc71;

}

.fore8 {
    background-color: #e67e22;
}

.hex-border-left8 .hex-left {
    border-right: 40px solid #e67e22;

}

.hex-border-right8 .hex-right {
    border-left: 40px solid #e67e22;

}

.hex-wrap1:hover .fore1 {
    background-color: #39B0FF;
    border-top: 1px solid #39B0FF;
    border-bottom: 1px solid #39B0FF;
}

.hex-wrap1:hover .hex-border-left1 {
    border-right: 41px solid #39B0FF;
}

.hex-wrap1:hover .hex-border-right1 {
    border-left: 41px solid #39B0FF;
}

.hex-wrap1:hover .hex-left {
    border-right: 40px solid #39B0FF;
}

.hex-wrap1:hover .hex-right {
    border-left: 40px solid #39B0FF;
}




真由理
关注
专栏目录
css实现六边形
zp1996323的博客
09-12 2770
最近在写一个蜂窝式布局,所以研究了一下六边形的实现原理 实现六边形的俩种方式: 方式一： 一个长方形+两个三角形 首先我们要先了解一下border 每个border之间是成45度,利用这点我们可以做出来三角形<div class="triangle"></div> /*css片段*/ .triangle{ width: 0; height: 0; border-b
纯css3绘制超炫六边形加载动画特效源码.zip
11-20
纯css3绘制超炫六边形加载动画特效源码.zip
css——实现正六边形的两种方法
qq_52622178的博客
05-11 1945
注意：宽度可以随便定义，高度是要根据宽度计算出来的。 公式：height = widthcos(30°)2 以下两种方法都可以实现。 【第一种】使用div+border，通过伪元素来实现 <style> .block{ width: 100px; height: 173.2px; background-color: skyblue; position:relative;
css3实现六边形边框的实例代码
11-21
最外层boxF旋转120度、第二层boxS旋转-60度、第三层boxT再旋转-60度，此时刚好回正，然后把图片就放在第3层的div背景中。因为前两层div中没有东西，纯粹就是用来旋转得到6边形的，所以对1，2层div设置 visibility: hidden ; 而第3层div是放图片的，需要显示出来，因此设置 visibility: visible; 经过旋转肯定有超出的部分，因此对3个div都设置 overflow:hidden; 经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。 注意： 1. 如果不对第3层div设置 visibility: visible; 那它默认就会继
如何利用CSS写一个六边形？
weixin_33961829的博客
06-07 551
众所周知，一般情况下div所表现出来的形态是一个矩形，如果给它添加border-radius属性，可以让它成为一个圆角矩形或者是圆形，但是如果希望div表现出更多的形态来呢？那么我们就来讲讲如何用CSS来写一个六边形。大家首先来看一下，一个六边形，拆解开来的话，就是一个矩形加左右两个三角形。三角形的话很好写，用边框border属性就可以实现。当我们给一个div非常粗的边框，但是宽度和高度分别都设置...
css实现六边形边框
十三月的博客
11-01 1201
css实现六边形边框
CSS 实现嵌套六边形边框
q1042960848的博客
09-01 2583
CSS 实现嵌套六边形边框 期望输出 原理 即三个六边形组合而成。 而六边形原理为：一个举行加上下俩三角形。 实现 HTML <div class="hex"> <div class="hex inner"> <div class="hex inner2"></div> </div> </div> CSS .hex { margin-top: 70px; wi
实现css六边形边框,css 这种六边形的边框怎么画？
weixin_39716417的博客
08-03 1025
用一个div+css怎么实现？还这种可以填充颜色的求代码！<html><head><style>.sixedge{height: 24px;width: 55px;position:relative;background-color: #FFF;border-top:1px solid green;border-bottom:1px solid green;ma...
CSS3绘制六边形的简单实现
09-24
在CSS3中绘制六边形是一种利用边框和伪元素技术来实现的创新方法。首先，我们要明白六边形的基本构造是由六个相等的三角形组成的。因此，要使用CSS来创建六边形，我们需要创建两个三角形，分别置于原始元素的前后，...
纯css绘制蜂巢六边形效果
09-25
纯CSS绘制蜂巢六边形效果 纵观给定的文件信息，我们可以看到，这篇文章主要介绍了...这篇文章主要介绍了如何使用纯CSS绘制蜂巢六边形效果， 涉及到了多种CSS概念，如选择器、盒模型、浮动布局、边框样式和背景样式等。
css3实现六边形列表
11-11
参照老外的整理的，用css3实现六边形列表，可自适应。 详见：http://blog.csdn.net/wuyt2008/article/details/53129772
css3画正六边形
08-11
纯css3画正六边形
css+html绘制6边型及蜂巢效果
01-20
用html加css的，构建6边型，并在此基础上实现蜂巢排列的效果
使用CSS实现六边形效果
最新发布
qq_42304221的博客
10-20 1516
这篇文章主要介绍了使用CSS实现六边形的图片效果，这个效果的难点在于六边形的绘制, 那么接下来我们就一起来看下作者是怎么实现他的吧
小白必看的css 之 如何使用CSS创建一个六边形的图形
2301_78784268的博客
07-21 598
在本教程中，我们将学习如何使用CSS创建一个六边形的图形。这个图形具有动态的过渡效果，当鼠标悬停在图形上时，它会变得更大。我们需要为所有元素设置一些基本的样式，以确保没有任何边距或填充。接下来，需要设置整个页面的背景颜色。在这个例子中，我们将背景颜色设置为。我们还添加了左右两侧的边框，将边框颜色设置为。我们首先设置了一个容器元素，并为其添加。伪元素设置绝对定位，并将它们的内容设置为空字符串。伪元素设置了相同的宽度和高度。同时，我们设置了它们的。然后，为容器元素和容器元素的。接下来，为容器元素的。
css实现六边形及其它灵活布局
梅花寺
01-03 1884
为每个六边形元素设置为`inline-block`) 至此，我们将得到这样的效果) `shape-outside`最有意思的是它可以使用渐变，但是什么样的渐变才适用于我们的六边形布局呢？假如我们有 10 行六边形，我们只需要在每偶数行移动一个`均值`。从不同的角度来看，我们需要每隔一行移动一次，所以我们需要一重复渐变。`shape-outside`大概设置为。
css给六边形加边框,css写的六边形怎么加边框阴影
weixin_42517623的博客
08-04 691
怎么给上下两个三角形加上边框阴影？.hexagon{position: relative;display:inline-block;margin-right: 20px;width: 200px;height: 120px;background-color: #fff;-moz-box-shadow: 0 0 20px #ddd;-webkit-box-shadow:0 0 20px #ddd;b...
CSS3实现正六边形图片
weixin_42679187的博客
04-11 1278
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .hexagon02, .hexagon02 .hexagon-inter, .hexagon02...
css制作六边形
qq_41703424的博客
02-04 264
.box-1{     width:0px;     border-bottom:18px solid #1c93c5;     border-left:32px solid transparent;     border-right:32px solid transparent; } .box-2{     width:63px;     height:40px;     ba
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值