资讯专栏INFORMATION COLUMN

六边形块级元素的绘制

jlanglang / 866人阅读

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

使用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;
    }

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

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

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

相关文章

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

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

    MrZONT 评论0 收藏0
  • 运用clip-path纯CSS形状变换

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

    wanglu1209 评论0 收藏0

发表评论

0条评论

jlanglang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<