六边形块级元素的绘制

jlanglang 发布于2019-08-29 12:46 / 1079人阅读

摘要：使用之前，都是利用图片作为背景来实现的，现在有这把利器，顺利完美的绘制六边形。绘制六边形代码可见代码非常简单，这里要运用伪元素来实现代码看完这个案例，对于绘制三角形就简单了，尝试自己绘制一下吧。

使用h5之前，都是利用图片作为背景来实现的，现在有h5+css3这把利器，顺利完美的绘制六边形。

绘制六边形

html代码：

可见html代码非常简单，这里要运用伪元素来实现

css代码：

.shape-layer {
    position:relative;
    width:336px;
    height:196px;
    background-color:#0174db;
    }
.shape-layer::before {
    content:"";
    position:absolute;
    left:0;
    top:-96px;
    width:0;
    height:0;
    border-left:transparent solid 168px;
    border-bottom:#0174db solid 96px;
    border-right:transparent solid 168px;
    }
.shape-layer::after {
    content:"";
    position:absolute;
    left:0;
    bottom:-96px;
    width:0;
    height:0;
    border-left:transparent solid 168px;
    border-top:#0174db solid 96px;
    border-right:transparent solid 168px;
    }

看完这个案例，对于绘制三角形就简单了，尝试自己绘制一下吧。
本文为原创文章，转载请注明出处，多谢您的支持。

云服务器 GPU云服务器六边形块级绘制六边形图片 python树的绘制块级流

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112126.html

使用 Canvas 绘制一个游戏人物属性图

摘要：中需要用到的数学公式很多网上都有，不需要自己手写，只要增加点印象，一个复制就可以拉过来用了，啦啦啦，小君也很会偷懒的，哈哈哈绘制直线同理，定义一个名为的函数来实现这部分功能。前言身为一个程序员竟然沉迷游戏，wtf？？？都怪腾讯前几天出了一款叫做寻仙的手游，作为曾经的资深玩家，小V君犹豫再三还是忍不住入坑了。入坑了怎么不去打游戏，还在这里发文章？不不不，小V君今天在这里可不是要跟...

MrZONT 2019-08-21 11:51 评论0 收藏0
运用clip-path的纯CSS形状变换

摘要：在之前所提到绘制正多边形的方法，算是纯粹利用伪元素来完成，不过坦白说还有另外一种方法，可以将单一做更多形状的变换，这种方法就是的，这个看起来有点眼熟，因为它原本就存在于里头，利用掩码剪裁的方法，连接坐标绘制掩码区域，就可以做出许多不同的在之前所提到绘制正多边形的方法，算是纯粹利用伪元素来完成，不过坦白说还有另外一种方法，可以将单一div做更多形状的变换，这种方法就是CSS3的clip...

wanglu1209 2019-08-29 18:39 评论0 收藏0