scss/css正六边形

转载 2016年08月31日 14:14:15

scss:

.hexagon {
    width: 100px;
    height: 55px;
    background: red;
    margin: 50px auto;
    position: relative;

    &:before,
    &:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
    }

    &:before {
        top: -25px;
        left: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 25px solid red;
    }
    &:after {
        bottom: -25px;
        left: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 25px solid red;
    }
}

或者css:

.hexagon {
        width: 100px;
        height: 55px;
        background: red;
        margin: 50px auto;
        position: relative; 
    }
    .hexagon:before, .hexagon:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0; 
    }
    .hexagon:before {
        top: -25px;
        left: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 25px solid red;
    }
    .hexagon:after {
        bottom: -25px;
        left: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 25px solid red;
    }

html:

<div class="hexagon"></div>

效果:这里写图片描述

相关文章推荐

css3画正六边形

  • 2016-08-11 11:32
  • 891B
  • 下载

在地图上画正六边形时出现的问题(d3)

在一个项目里需要在地图上叠加正六边形图形进行分割。用的方法是d3给的方法。流程是: (1)获取地图边框范围 (2)计算出铺满地图范围的所有六边形的中心点的坐标centers[]; (3)利用sin 与...

Unity3D 正六边形,环状扩散,紧密分布,的程序

原文链接:  http://www.cnblogs.com/AdvancePikachu/p/6401758.html Unity3D 正六边形,环状扩散...

正六边形demo

  • 2017-07-03 20:38
  • 1020B
  • 下载

android正六边形按钮

  • 2016-02-26 17:49
  • 219KB
  • 下载

正六边形

昨天在一个技术群中看到一个这样的图片,觉得挺好看的,今天自己试试 实现六边形方法有4 1. 三个长方形旋转( 60°,120°) 2. 一个长方形+ 两个三角形(距离不好计算) 3. svg ...

matlab 正六边形随机撒点

  • 2013-06-08 11:55
  • 165KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)