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
  • 下载

Scss和其他优秀CSS框架

scss语法@import "01.scss"; $blue: #fff0b3; $side: left; $width: 40px; .class1 { position: relative; ...

正六边形demo

  • 2017年07月03日 20:38
  • 1020B
  • 下载

使用 sass/scss 编写CSS 快速上手

CSS不是一种编程语言,它只是个配置文件,并没有生命。但我等大程序怎么能容忍自己写出来的东西不能动态变化,不能封装继承,不能xxoo呢,于是就有了css预处理的概念。这篇文章主要介绍scss的基本用法...
  • fansongy
  • fansongy
  • 2015年04月09日 19:21
  • 11270

android正六边形按钮

  • 2016年02月26日 17:49
  • 219KB
  • 下载

matlab 正六边形随机撒点

  • 2013年06月08日 11:55
  • 165KB
  • 下载

用SCSS需要小心IE对css的几个限制

IE对CSS的限制主要有两个: 一个页面中引用的CSS只读前32个一个CSS文件中只读前4095个选择器 关于这个问题的文章有很多,我就不细讲了。 我想讲的是在用SCSS写CSS的时候非常容易超...
  • jyee721
  • jyee721
  • 2014年02月16日 17:23
  • 1600

matlab正六边形随机撒点

  • 2012年08月10日 08:17
  • 159KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:scss/css正六边形
举报原因:
原因补充:

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