zoukankan      html  css  js  c++  java
  • css绘制六边形

    CSS id选择器实现 正六边形

    用css绘制六边形需要使用到三个容器,分别用于绘制六边形的三个部分,如下图所示:

    HTML代码:

    1 <div id="box1"></div>
    2 <div id="box2"></div>
    3 <div id="box3"></div> 

    CSS代码:

     #box1{0;border-left: 52px solid transparent;border-right: 52px solid transparent;border-bottom: 30px solid #6c6;    }
        #box2{ 104px;height: 60px;background-color: #6c6;}
        #box3{0;border-top: 30px solid #6c6;border-left: 52px solid transparent;border-right: 52px solid transparent;}

    CSS代码:

    1 #box4{0;border-right: 30px solid #6c6;border-top: 52px solid transparent;border-bottom: 52px solid transparent;float: left;}
    2 #box5{ 60px;height: 104px;background-color: #6c6;float: left;}
    3 #box6{0;border-left: 30px solid #6c6;border-top: 52px solid transparent;border-bottom: 52px solid transparent;float: left;}

    HTML代码:

    1 <div id="box1"></div>
    2 <div id="box2"></div>
    3 <div id="box3"></div> 

    CSS3 为元素实现:

     1 #hexagon {
     2     width: 100px;
     3     height: 55px;
     4     background: red;
     5     position: relative;
     6 }
     7 #hexagon:before {
     8     content: "";
     9     position: absolute;
    10     top: -25px;
    11     left: 0;
    12     width: 0;
    13     height: 0;
    14     border-left: 50px solid transparent;
    15     border-right: 50px solid transparent;
    16     border-bottom: 25px solid red;
    17 }
    18 #hexagon:after {
    19     content: "";
    20     position: absolute;
    21     bottom: -25px;
    22     left: 0;
    23     width: 0;
    24     height: 0;
    25     border-left: 50px solid transparent;
    26     border-right: 50px solid transparent;
    27     border-top: 25px solid red;
    28 }
  • 相关阅读:
    mac 版 Pycharm 激活
    最快的 maven repository--阿里镜像仓库
    java-Object
    java --replaceAll方法
    正则表达式中^[a-z]与[^a-z]有区别吗
    keyListener用的健值表,保留一份
    java播放背景音乐 mp3和mav都可以播放
    腾讯云ubuntu远程桌面
    nginx 配置转发到其他多台服务器
    java 键盘监听事件
  • 原文地址:https://www.cnblogs.com/jeremylee/p/5593598.html
Copyright © 2011-2022 走看看